尤雨溪宣布 Vue 3 将在 2022 年 2 月 7 日成为新的默认版本。
序言
从vue3正式发布今天也已经接近一年半的时间了，在这期间各种vue3相关的文章真是满天飞，有的是对比优劣、有的是基础教程，我也是为了紧紧更上前端发展的脚步，同时vue2.x也是自己的主要技术栈，所以更要抓紧尝试新迭代。所以这次也是使用尤大推荐vite2的工具，来搭建一个基础前端项目。后续自己也会用这个基础项目，开发一些小功能。
完整代码：GitHub
| 基础环境 | |
|---|---|
npm | 6.14.8 |
node | 14.15.0 |
cmder | 终端工具 |
vscode | volar(重要插件) |
chrome | 浏览器 |
正式开始
一. 使用create vite
简单阅读vite官网，在终端中运行npm create vite@latest xz-ui --template vue-ts就可以来搭建起我们的基本项目，我这里用的是vue3 + ts的模板，之后就生成一个名为xz-ui的项目。新建的项目结构如图：
├── public 静态资源
├── src
│ ├── assets 资源
│ ├── components 组件
│ ├── App.vue 主应用
│ ├── env.d.ts 全局声明
│ └── main.ts 主入口
├── .gitignore git忽略配置
├── index.html 模板文件
├── package.json 依赖包/运行脚本配置文件
├── README.md
├── tsconfig.json ts配置文件
├── tsconfig.node.json ts配置文件
└── vite.config.ts vite配置
接着依次运行
cd xz-ui
npm install
npm run dev
我们的项目就跑起来了，把终端中的项目url，复制进在浏览器中，就可以看到下图，基础工作就完成了。
二. 关于vite.config.ts
vite.config就是vite2的核心文件，我们关于vite2的配置都在这里。
因为我们是ts的项目，所以我们需要先安装一下node的类型包，不然是会报错的。
npm install -D @types/node
我的完整配置:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()], // 插件配置
optimizeDeps: { // 强制预构建插件包
entries: [], // 检测需要预构建的依赖项
include: [],
exclude: []
},
publicDir: 'public', // 静态资源服务的文件夹
base: './', // 基础路径
assetsInclude: '', // 静态资源处理
clearScreen: false, //设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
resolve: {
alias: { // 路径别名
'@': resolve(__dirname, 'src'),
views: resolve(__dirname, './src/views'),
components: resolve(__dirname, './src/components')
},
conditions: [],
extensions: ['.ts', '.js', '.jsx', '.tsx', '.json']
},
css: { // css配置
modules: {}, // 配置css modules
postcss: {}, // postCss配置
preprocessorOptions: {
scss: {} // 可以导入项目的css变量
}
},
server: { // 开发配置
host: 'localhost',
cors: true, // 跨域
port: 8020 // 端口
// proxy: { // 接口地址
// '/api': {
// target: '',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, '')
// }
// }
},
build: { // 构建配置
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 配置静态资源路径
assetsInlineLimit: 4096, //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
cssCodeSplit: true, //启用/禁用 CSS 代码拆分
sourcemap: false, //构建后是否生成 source map 文件
manifest: false,
// 设置为 false 可以禁用最小化混淆
// 或是用来指定使用哪种混淆器
// boolean | 'terser' | 'esbuild'
// terser 构建后文件体积更小
minify: 'terser',
terserOptions: { //传递给 Terser 的更多 minify 选项
compress: { // 清除log
keep_infinity: true,
drop_console: true,
drop_debugger: true
}
},
brotliSize: true, //启用/禁用 brotli 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
chunkSizeWarningLimit: 3000 // chunk大小警告限制
}
});
三. 基础依赖
但作为一个基础项目，不能仅有这点东西。我们还需要
eslint+prettier+stylelint：js、css代码格式化.env：环境配置vue全家桶：vue-router、piniascss：css预处理器husky：git hook
1. eslint + prettier + stylelint
好的代码必然是规范出来的，所以代码格式化校验工具，在现代开发中，是很重要的。
- 运行
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier stylelint stylelint-config-standard-scss stylelint-scss
安装我们所需的包
- 在项目根目录下新建
.eslintignore
# 忽略文件和文件夹
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.json
Dockerfile
.eslintrc.js
eslint的js格式化配置
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
},
plugins: ['@typescript-eslint', 'prettier'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-recommended',
'prettier',
'plugin:prettier/recommended'
],
// 可以自定义一些校验规则
rules: {},
overrides: [
{
files: ['*.vue'],
rules: {
indent: 'off'
}
}
]
};
- 在项目根目录下新建
.stylelintignore
# 其他类型文件
*.js
*.ts
*.jpg
*.woff
# 测试和打包目录
/dist/
/node_modules/
.stylelintrc.js
css的格式化配置
为了让stylelint认识vue文件，我们还需要postcss-html
npm install -D postcss-html
module.exports = {
"customSyntax": "postcss-html",
"extends": ["stylelint-config-standard-scss"],
"plugins": ["stylelint-scss"],
// 可以自定义一些校验规则
"rules": {},
"ignoreFiles": ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts']
}
- 在项目根目录下新建
.prettierignore
prettier的js格式化配置
# 其他类型文件
*.js
*.ts
*.jpg
*.woff
# 测试和打包目录
/dist/
/node_modules/
- 在项目根目录下新建
.prettierrc.js
prettier的js格式化配置
module.exports = {
semi: true,
eslintIntegration: true,
singleQuote: true,
endOfLine: 'crlf',
tabWidth: 2,
trailingComma: 'none',
bracketSpacing: true,
arrowParens: 'avoid'
}
2. .env
定义env环境变量前面必须加VITE_
- 在根目录下新建
.env所有情况都会加载
VITE_TITLE=XZ-UI
下面两种都会在特定模式下加载
- 在根目录下新建
.env.dev
VITE_API_ENV=dev
- 在根目录下新建
.env.pro
VITE_API_ENV=pro
我们可以通过import.meta.env来获取我们的环境变量
在package.json中添加，使用不同命令就可以根据不同环境打包了。
"build:dev": "vite build --mode dev",
"build:pro": "vite build --mode pro",
3. vue全家桶
适配vue3升级版的vue-router
npm install vue-router@4
pinia也是尤大在新的演讲中，为我们重点推荐的vue状态管理工具，它比vuex有更好的ts使用体验，并精简了api，同时也是vue官方团队的人员开发，质量有保证。
npm install pinia
在main.ts中引入它们
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index';
import { createPinia } from 'pinia';
const app = createApp(App);
app.use(router);
app.use(createPinia());
app.mount('#app');
在src目录下，新建stores和router目录,用来管理路由和状态
新建src/router/index.ts，来创建我们的示例路由
import { createWebHashHistory, createRouter, RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'Home',
component: () => import('views/Home.vue')
},
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
新建src/stores/index.ts，来创建我们的示例状态管理
import { defineStore } from 'pinia';
interface UserProps {
name: string;
}
interface UserState {
userInfo: NonNullable<UserProps>;
}
export const useUserStore = defineStore('user', {
state: (): UserState => ({
userInfo: {
name: ''
}
}),
getters: {
getUser(): NonNullable<UserProps> {
return this.userInfo || null;
}
},
actions: {
setUserInfo(info: NonNullable<UserProps>) {
this.userInfo = info ?? null;
}
// 接口请求
// async fetchUserInfo(params: ReqParams){
// const {data} = await api.getUserInfo(params)
// this.setUserInfo(data)
// }
}
});
4. scss
npm install -D sass
直接运行即可，是不是很容易，它将直接安装dart-sass，再也不用忍受之前的安装node-sass的各种奇怪的问题了。
5. husky
npm install -D husky lint-staged
在package.json中添加，这样我们进行commit时，就会校验我们的代码，是否符合代码规范
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{ts,vue}": [
"eslint --fix"
],
"*.vue": [
"stylelint --fix --custom-syntax postcss-html"
]
},
尾言
至此，我们的使用vite2+vue3+ts的项目已经基本搭建完成了，后续也可以根据自己的实际需求，引入UI组件库、axios、loadsh等一系列开发工具，帮助我们更快、更好的完成项目。后续我也会在这个项目基础上去做一些开发，如果大家有兴趣的话，可以持续关注这个仓库，完整的项目代码，也在仓库中，欢迎star！👍
