Vue3+TypeScript项目实战day1——项目的创建及环境配置
项目介绍
- 项目预览地址:http://152.136.185.210
- 账号1:coderwhy 密码:123456 账号2:coderdemo 密码:123456
- 接口地址:
- 接口v1
https://documenter.getpostman.com/view/12387168/TzsfmQvw - baseURL的值:
http://152.136.185.210:4000```
- 设置全局token的方法:
pm.globals.set("token",res.data.token);```
- 接口v2
https://documenter.getpostman.com/view/12387168/TzzDKb12
- 接口v1
- 技术栈介绍:
- 开发工具:Visual Studio Code
- 编程语言:TypeScript 4.x+JavaScript
- 构建工具:Vite3.x/Webpack5.x
- 前端框架:Vue3.X+setup
- 路由工具:Vue Router4.x
- 状态管理:Vuex4.x/Pinia
- Ul框架:Element Plus
- 可视化:Echart5.x
- 工具库:@vueuse/core+dayjs+countup,js等等
- CSS预编译:Sass/Less
- HTTP工具:Axios
- Git Hook工具:husky
- 代码规范:EditorConfig+Prettier+ESLint
- 提交规范:Commitizen+Commitlint
- 自动部署:Centos+Jenkins+Nginx
创建Vue项目
- 方式一:Vue CLI
- 基于webpack工具;
- 命令:
vue create project-name
- 方式二:create-vue
- 基于vite工具;
- 命令:
npm init vue@latest
- 项目配置:
- 配置项目的icon
- 配置项目的标题
- 配置项目别名等(vite默认配置)
- 配置tsconfig.json
配置项目环境
安装volar和volar+TS插件:
配置vue文件模块:
使用prettier工具
Prettier是一款强大的代码格式化工具,支持JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、
Vue、GraphQL、JSON、Markdown等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码
格式化工具。
- 安装prettier
npm install prettier -D
- 配置.prettierrc,文件:
- useTabs:使用tab缩进还是空格缩进,选择false;
- tabWidth:tab是空格的情况下,是几个空格,选择2个;
- printWidth:当行字符的长度,推荐80,也有人喜欢100或者120;
- singleQuote:使用单引号还是双引号,选择true,使用单引号;
- trailingComma:在多行输入的尾逗号是香添加,设置为none,比如对象类型的最后一个属性后面是否加一
个; - semi:语句末尾是否要加分号,默认值true,选择false表示不加;
{
"useTabs":false,
"tabwidth":2,
"printwidth":80,
"singleQuote":true,
"trailingComma":"none",
"semi":false
}
- 创建.prettierignore忽略文件
/dist/* .local output.js /node_modules/** */*.5Vg **/*.sh /public/*```
- VSCode:需要安装prettier的插件
- VSCod中的配置
- settings=>format on save=>勾选上
- settings =>editor default format =>选择prettier
- 测试
prettier
是否生效
- 测试一:在代码中保存代码:
- 测试二:配置—次性修改的命令:
在package,json中配置一个scripts:
"prettier":"prettier --write."
使用ESLint检测
- 在前面创建项目的时候,我们就选择了ESLint,所以Vue会默认帮助我们配置需要的ESLint环境。
- VSCode需要安装ESLint插件:
- 解决eslint和orettier)冲突的问题:
安装插件:(Vue在创建项目时,如果选择prettier,那么这两个插件会自动安装)
npm install eslint-plugin-prettier eslint-config-prettier -D
添加prettier插件:"plugin:vue/vue3-essential", "eslint recommended", "@vue/typescript/recommended", "Qvue/prettier", "Qvue/prettier/@typescript-eslint", plugin:prettier/recommended' ]```
区分developmenta和production环境
-
Vite的环境变量:
-
Vite在一个特殊的import…eta.env对像上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量:
import.meta.env.MODE
:{string}应用运行的模式。import.meta.env.PROD
:{boolean}应用是否运行在生产环境。import.meta.env.DEV
:{boolean}应用是否运行在开发环境(永远与import.meta.env.PROD相反)。import.meta.env.SSR
:{boolean}应用是否运行在server上。// 1.区分开发环境和生产环境
// export const BASE_URL = ‘http://coderwhy.dev:8000’
// export const BASE_URL = ‘http://codercba.prod:8000’// 2.代码逻辑判断, 判断当前环境
// vite默认提供的环境变量
// console.log(import.meta.env.MODE)
console.log(import.meta.env.DEV) // 是否开发环境
console.log(import.meta.env.PROD) // 是否生产环境
console.log(import.meta.env.SSR) // 是否是服务器端渲染(server side render)let BASE_URL = ‘’
if (import.meta.env.PROD) {
BASE_URL = ‘http://codercba.prod:8000’
} else {
BASE_URL = ‘http://coderwhy.dev:8000’
}console.log(BASE_URL)
// 3.通过创建.env文件直接创建变量
console.log(import.meta.env.VITE_URL)export const TIME_OUT = 10000
export { BASE_URL } -
Vite使用dotenv从你的环境目录中的下列文件加载额外的环境变量:
-
只有以VITE为前缀的变量才会暴露给经过vite处理的代码。