[Vue] 使用Vite创建Vue3项目框架

作者：admin，发布日期：2021-02-03
阅读：2408；评论：0

仅做个人记录

项目创建

Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience.

Vite代码：https://github.com/vitejs/vite

Vite文档：https://vitejs.dev/

运行yarn create创建项目

yarn create vite

进入项目，安装依赖

cd test-proj
yarn install

开启开发服务器

yarn run dev

当看到下列提示，说明脚手架搭建成功

配置eslint和prettier

安装eslint，eslint-plugin-vue(用于支持vue代码检查，-D代表添加到开发依赖)

yarn add -D eslint@^7 eslint-plugin-vue

安装prettier以及附属插件

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

接着创建eslint配置，在项目根目录创建【.eslintrc.js】

• env设置node为true，代表开启node的特性（不开的话module会报错）

• rules配置参考eslint-plugin-prettier（https://github.com/prettier/eslint-plugin-prettier）

• extends配置参考eslint-plugin-vue（https://eslint.vuejs.org/user-guide/#usage）

module.exports = {
  env: {
    node: true,
  },
  extends: [
    "eslint:recommended", //
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended",
  ],
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
  },
};

配置完eslint后，配置prettier配置，在项目根目录创建【.prettierrc.js】

module.exports = {
  endOfLine: "auto",
  printWidth: 120
};

prettier配置项说明

• endOfLine - 防止行结尾符不一致导致eslint提示错误（参考：https://prettier.io/docs/en/options.html#end-of-line）

• printWidth - 配置代码最大行数
  

增加一键格式化所有文件

修改package.json文件，在script增加以下项目

命令说明：

• eslint - 运行eslint命令

• --fix - 修复并校验

• --ext - 指定扩展文件名

• "src" - 代表只对src目录运行lint

  "scripts": {
    ...原有项目
    "lint": "eslint --fix --ext .js,.vue src"
  },

使用的VSCode插件

编译项目

yarn run build