Vue 3项目创建——vite初次尝试（最新）

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。

Vite具有以下特点：

• 快速的冷启动
• 即时热模块更新（HMR，Hot Module Replacement）
• 真正按需编译

Vite是在推出Vue 3的时候开发的，目前仅支持Vue 3.x，这意味着与Vue 3不兼容的库也不能与Vite一起使用。vite2.0在2021年的2.17号推出=》Vite.js中文网

创建vue3项目

官网的步骤:

// npm
npm init @vitejs/app

// yarn
yarn create @vitejs/app

刚弄的时候我就有个疑问不需要安装什么嘛？但是好像这个命令他自己会安装。

不过我npm执行这个命令的时候会出现错误

我猜测这是在它安装@vite/create-app依赖的时候出问题了，所以我手动安装

// 在我写这篇的时候最新版本是2.2.5，
// 如果安装报错，尝试加上安装的版本
npm i @vitejs/create-app -g

依赖都安装好后就继续执行创建命令
2.2.5版本创建提示有点不一样，但总的流程是一样的，所以截图我就不改了

创建过程就两步：

• 设置文件名称
• 选择模板预设

-ts的意思是项目中使用ts进行开发，从中我们可以发现vite也能创建react项目（那这样我是不是就可以把之前创建react的包删了，全部用vite呢？）

最后会生成一个很干净的项目，目录结构如下：

运行

// 安装依赖
npm i 

从package可以看出来：

• vue2使用vue-cli脚手架运行项目
• vue3使用vite运行项目

// 启动服务，会发现秒启动，这就是vite的快速的冷启动
yarn dev

添加eslint、prettier

在根目录下创建.eslintrc.js、.eslintignore、prettier.config.js文件

// 安装依赖
cnpm i -D eslint eslint-plugin-prettier eslint-plugin-vue

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended'],
  rules: {
    'no-unused-vars': [
      1,
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

// .eslintignore
node_modules
/public
dist

// prettier.config.js
module.exports = {
  printWidth: 130,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  vueIndentScriptAndStyle: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'es5',
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'lf',
  rangeStart: 0,
};

最后在package.json新增一条npm命令

// --fix 表示将自动修复
"lint": "eslint \"src/**/*.{vue,js}\" --fix"

到这，一个vue3的项目就创建好了，没有任何ui库，只用到一个vue3的包，很干净。