1- 配置` vue3 ` 的基础的工程模板
1+ 配置` vue3 ` 的基础的工程模板，直接获取源码 [ vue3-vite-js-template ] ( https://github.com/coderminer/vue3-vite-js-template ) ，工程的创建过程如下
22
33###创建工程
44
88npm init vite vue3-vite-js-template
99```
1010
11+ ###配置 eslint
12+
13+ 安装相关的依赖
14+
1115```
1216npm install eslint eslint-plugin-vue @babel/core @babel/eslint-parser -D
1317```
1418
15- 创建` .eslintrc.js `
19+ 创建` .eslintrc.js ` ，添加相应的配置，配置如下
1620
1721```
1822module.exports = {
@@ -36,20 +40,20 @@ module.exports = {
3640};
3741```
3842
39- 创建` .eslintignore `
43+ 创建` .eslintignore ` 忽略文件
4044
4145```
4246/dist/
4347/node_modules/
4448```
4549
46- 添加` lint `
50+ 添加` lint ` 命令，执行命令可以自动的 fix 一些错误信息
4751
4852```
4953"lint": "eslint --ext .vue,.js,.ts,.jsx,.tsx --fix src"
5054```
5155
52- vue3 的 setup 语法糖还是有错误
56+ 但是， ` vue3 ` 的` setup ` 语法糖还是有错误，错误如下
5357
5458```
5559error 'defineProps' is not defined no-undef
@@ -66,11 +70,9 @@ env: {
6670 },
6771```
6872
69- ###eslint
70-
7173###prettier
7274
73- 统一代码风格
75+ 统一代码风格，安装相关的依赖
7476
7577```
7678npm install prettier eslint-config-prettier eslint-plugin-prettier -D
@@ -80,37 +82,34 @@ npm install prettier eslint-config-prettier eslint-plugin-prettier -D
8082
8183```
8284module.exports = {
83- // 一行的字符数，如果超过会进行换行，默认为80
8485 printWidth: 120,
85- // 一个tab代表几个空格数，默认为80
8686 tabWidth: 2,
87- // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
8887 useTabs: false,
89- // 字符串是否使用单引号，默认为false，使用双引号
9088 singleQuote: true,
91- // 行位是否使用分号，默认为true
9289 semi: false,
93- // 是否使用尾逗号，有三个可选值"<none|es5|all>"
9490 trailingComma: 'none',
95- // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
9691 bracketSpacing: true,
97-
98- // 开启 eslint 支持
9992 eslintIntegration: true
10093}
10194
10295```
10396
104- 也可以添加` .prettierignore ` 文件，忽略文件
97+ 修改` eslint（.eslintrc.js） ` 配置，解决` eslint prettier ` 的冲突，在` extends ` 中添加
98+
99+ ```
100+ 'plugin:prettier/recommended'
101+ ```
102+
103+ 在` rules ` 中，添加
105104
106105```
107- node_modules
108- .vscode
106+ 'prettier/prettier': 'error',
107+ 'vue/multi-word-component-names': 0
109108```
110109
111- 修改 eslint（.eslintrc.js）配置
110+ ### 保存时格式化
112111
113- ### 自动保存
112+ 在 ` .vscode ` 中，添加 ` settings.json ` 文件，添加下面的信息，这样使用 ` ctrl + s ` 保存时，会自动格式化
114113
115114```
116115{
@@ -123,15 +122,13 @@ node_modules
123122
124123###husky
125124
125+ 提交时检查提交信息，先按照相关依赖
126+
126127```
127128npm install husky lint-staged -D
128129```
129130
130- repare 脚本会在 yarn install 之后自动运行，这样依赖你的小伙伴 clone 了你的项目之后会自动安装 husky,这里由于我们已经运行过 yarn install 了，所以我们需要手动运行一次 yarn run prepare,然后我们就会得到一个目录.husky。
131-
132- ` npm run prepare `
133-
134- 会生成，` .husky ` 文件夹，
131+ 添加` prepare ` 命令，` prepare ` 会在` npm install ` 之后自动执行，如果已经执行过` npm install ` 的话，可以直接执行` npm run prepare ` , 执行之后会生成，` .husky ` 文件夹，
135132
136133接下来我们为我们 git 仓库添加一个 pre-commit 钩子,运行
137134
@@ -165,6 +162,19 @@ npx --no-install lint-staged
165162
166163###创建别名
167164
165+ 在` vite.config.js ` 中添加
166+
167+ ```
168+ resolve: {
169+ alias: {
170+ '@': path.resolve(__dirname, 'src'),
171+ '@component': path.resolve(__dirname, 'src/components'),
172+ '@layout': path.resolve(__dirname, 'src/layouts'),
173+ '@page': path.resolve(__dirname, 'src/pages')
174+ }
175+ }
176+ ```
177+
168178###router
169179
170180安装` vue-router `
@@ -213,3 +223,39 @@ const app = createApp(App)
213223app.use(router)
214224app.mount('#app')
215225```
226+
227+ ###添加 tailwindcss
228+
229+ ```
230+ npm i -D tailwindcss postcss autoprefixer
231+ npx tailwindcss init -p
232+ ```
233+
234+ ` tailwind.config.js ` 中添加
235+
236+ ```
237+ module.exports = {
238+ content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
239+ theme: {
240+ extend: {}
241+ },
242+ plugins: []
243+ }
244+
245+ ```
246+
247+ 创建` index.css `
248+
249+ ```
250+ @tailwind base;
251+ @tailwind components;
252+ @tailwind utilities;
253+ ```
254+
255+ 在` main.js ` 中 引入
256+
257+ ```
258+ import './index.css'
259+ ```
260+
261+ 然后就可以使用` tailwindcss ` 了
