Vue3+TypeScript + vuex + vue-router 项目创建

一、安装Node.js

可参考这篇文章安装Node.js_qq_22841387的博客-CSDN博客，这里就不细讲了

安装完成的可跳过此步骤（本地曾经跑过vue2.x的也可以跳过）

二、卸载旧版本（安装过vue2的）

1.查看vue版本

vue -v

如果直接使用该版本创建Vue3项目会报一下错误

2.卸载旧版本

npm uninstall vue-cli -g

3.安装新版本

npm install -g @vue/cli   

等待……大约3-4分钟左右

出现下图，安装成功

4.查看当前版本

vue -V

安装vue-cli 3.0以上即可

@是默认安装最新版本

三、初始化项目

1.选择需要安装项目的位置

进入文件，在文件地址处输入cmd

2.新建项目

进入选定文件夹后，输入下方命令

vue create vue3-demo

这里的vue3-demo是你需要创建的项目名称，可自行更改

3.选择更快的源，选择Y

4.请选择预设模式

如果选择Default，则不默认支持vue-router和typescript
所以选择自定义

按方向上下键，选择Manually select features

5.配置项目

按照下方截图配置，除了Progressive Web、Unit Testing和E2E Testing之外，其他全选

上下键选择，空格键选中

回车继续

6.选择3.x

7.选择Class样式组件

类型更加严格，代码更加规范

即原本通过home = new Vue()创建一个实例

使用实例后变为class home extends Vue{}

8.使用Babel转义

9.不开启路由模式（可能出现打包后，白页情况）

10.选择一种css预选择器

• Sass：安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能）
• Less：Less最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)
  Stylus：Stylus主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS。

这里我选择的是Less，因为可能更需要在客户端和服务端运行css代码

11.选择代码风格

选择最后一个，统一代码风格

12.选择保存时检查（默认即可）

13.Babel,ESLint和其他的配置文件存放方式

• 单独的文件
• 全部放入package.json中

为了清晰和便于修改，我选择每个配置单独的文件
并且，单个文件支持添加注释

14.是否保存为模板

这个随意，我选择是，便于以后的创建
选择后，输入模板名称

等待大约1-3分钟即可完成

出现上图即完成项目的创建

四、运行项目

1.进入目录

cd vue3-demo

这个名称为你刚才创建的项目名

2.运行项目

npm run serve