1.使用脚手架创建项目
- create-vue 基于vite和node（官方最新推荐）Vue3
npm init vue@latest
2.配置项目
- public>favicon.ico 更换图标
- index.html 修改标题
- vite.config.ts 设置路径别名 Vite
import { path } from "path";
export default defineConfig({
...
resolve: {
alias: {
// 设置别名 这里的./指的是 vite.config.js 的所载目录（根目录）下面的 src
'@': path.resolve(__dirname, './src')
}
}
})
- .vscode>extensions.json安装推荐的环境插件
3.配置代码规范
EditorConfig 编码风格
- vscode 插件：EditorConfig for VS Code
- .editorconfig
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
Prettier 格式化
- vscode 插件：Prettier - Code formatter
- .prettierrc.json
{
"$schema": "https://json.schemastore.org/prettierrc",
"useTabs": false,
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 80,
"trailingComma": "none"
}
- .prettierignore
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
-
设置 vscode 保存时自动格式化
-
settings =>format on save => 勾选上
-
settings => editor default format => 选择 prettier
ESlint 不规范代码检测
- vscode 插件：ESLint
- 解决 Prettier 和 ESlint 冲突问题
npm install eslint-plugin-prettier eslint-config-prettier -D
//.eslintrc.cjs
'extends': [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/eslint-config-typescript",
"@vue/eslint-config-prettier",
"plugin:prettier/recommended" //这里
],
Husky 提交时自动lint
- 安装
npx husky-init && npm install
- .husky>pre-commit
#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh"
npm run lint
Commitizen git commit message规范
- 安装
npm install commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact
- 使用 npx cz 代替 git commit
commitlint 限制不能使用 git commit提交
- 安装
npm i @commitlint/config-conventional @commitlint/cli -D
- commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional']
}
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
4.项目内容搭建
src 下目录结构创建
.
├── App.vue
├── assets
│ ├── css
│ └── img
├── components
├── global
├── hooks
├── main.ts
├── router
├── service
├── store
├── types
├── utils
└── views
CSS样式重置
- Nomalize.css
- reset.css （手动）
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {
padding: 0; margin: 0;
}
a {
color: #333;
text-decoration: none;
}
img {
vertical-align: top;
}
Vue Router
- 安装、配置、测试
- vscode>首选项>配置用户代码片段 snippet-generator
{
"vue3 typescript": {
"prefix": "tsvue",
"body": [
"<template>",
" <div class=\"${1:home}\">",
" <h2>${1:home}</h2>",
" </div>",
"</template>",
"",
"<script setup lang=\"ts\"></script>",
"",
"<style lang=\"less\" scoped>",
".${1:home} {",
" margin: 0;",
"}",
"</style>",
""
],
"description": "vue3 typescript"
}
}
Pinia
- 安装、配置、测试
Element Plus
Axios
- 复制写好的
- src>service>config>index.ts 设置 BASE_URL、区分开发和生产环境
// 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://152.136.185.210:4000'
} else {
BASE_URL =
'https://www.fastmock.site/mock/046c9a86f344ac3742b8411ee508e233/cms' //fastmock
}
// 3.通过创建.env文件直接创建变量
// console.log(import.meta.env.VITE_URL)
export const TIME_OUT = 10000
export { BASE_URL }
