尤雨溪宣布 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、pinia
scss：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

下面两种都会在特定模式下加载

VITE_API_ENV=dev

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！👍

一步步搭建一个vite2+vue3+ts的基础项目

序言

正式开始

一. 使用create vite

二. 关于vite.config.ts

三. 基础依赖

1. eslint + prettier + stylelint

2. .env

3. vue全家桶

4. scss

5. husky

尾言