vite创建项目篇

我们使用vite来创建vue3项目，相对于来说是比较快捷方便的.

这里我们可以参考官网文档: Vite中文网 (vitejs.cn)
在我们使用vite来创建项目是我们一定要注意: 我们要尽量做到使用yarn命令，还有就是node版本必须是在12.0.0以上，不然会报错.

1.创建项目的命令

//npm命令
npm init @vitejs/app
//yarn命令
yarn create @vitejs/app


//创建项目示例
//中括号处为项目名称
npm init @vitejs/app [name]
yarn create @vitejs/app [name]

//下载node_modules
yarn
npm i

2.选择创建vue项目

选择自己想要创建的项目

3.选择自己想要的版本，暂时选择非ts的版本

4.安装我们项目中开发需要的依赖，执行命令

//下载依赖
//开发依赖
yarn add vue-router@next vuex@next element-plus axios -S
//生产依赖
yarn add sass -D

//删除依赖（只是展示一下命令，并不需要去操作）
yarn remove vue-router@next vuex@next element-plus axios
yarn remove sass

通常情况下我们的项目中需要使用的基础的开发依赖就是:vue-router(路由)、vuex(状态管理工具)、element-plus(element组件，方便开发)、axios(请求接口)

element-plus官网:Element Plus (gitee.io)
axios官网:axios中文文档|axios中文网 | axios (axios-js.com)
vue3中vuex官网:什么是Vuex？(vuejs.org)
vue3中vue-router官网:Vue Router (vuejs.org)

5.查看依赖是否安装成功

有些时候我们在安装完成项目依赖之后，需要查看是否安装成功，是否可以使用，那么我们就需要找到package.json文件，查看我们安装完成的依赖.
因为我们使用的vite是安装的vue3项目，所以我们的vue-router版本和vuex版本是4.0版本的，vue2中这两个依赖是3.0版本的，在vue3中我们使用的是element-plus组件，vue2中使用的是element-ui组件，两者有稍微不同，注意辨别。 axios是通用的，直接安装就可以

{
  "name": "vuevite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "element-plus": "^1.0.2-beta.70",
    "vue": "^3.0.5",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "sass": "^1.37.5",
    "vite": "^2.4.4"
  }
}

让我们用vite搭建一个vue3的项目吧!