Vue3脚手架指南
在DOS命令行窗口下操作
使用Vue3，必须安装node.js，执行如下命令，检查node环境：
>node -v
v16.14.0
1.安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.安装脚手架
Vue的脚手架名称由vue-cli改成了@vue/cli，如果以及全局安装了旧版本的vue-cli（1.x或2.x），最好先卸载：
>npm uninstall vue-cli -g
安装脚手架@vue/cli
>npm install -g @vue/cli
检查
>vue --version
@vue/cli 5.0.1
3.创建项目
3.1使用命令
>vue create mydemo
如下图：
1.选择配置方式
这里可以选择配置方式，默认为Vue3，我们在这里选择手工配置。
2.选择使用的模块
如下图：
通过空格键选择要使用的模块，我们在这里选择Babel、Router、Vuex、CSS Pre-processors、Linter/Formatter，选择好后回车。
3.选择版本版本
如下图：
我们在这里选择3.x
4.选择router模式
如下图：
我们在这里选择使用历史模式
5.选择CSS预处理器
如下图：
这里我们选择Sass/SCSS (with dart-sass)
6.选择代码格式和校验选项
如下图：
这里我们选择ESLint with error prevention only，表示仅用于错误预防。
7.选择检查代码的时机
如下图：
我们在这里选择Lint on save，表示保存时检查。
8.选择Babel和ESLint配置信息的保存
如下图：
第一项是在专门的配置文件中保存配置信息，第二项是在package.json文件中保存配置信息
我们在这里选择第一项。
9.选择是否保存本次的设置
如下图：
如果选择保存本次设置，然后输入本次设置的名称，即可保存，以后创建项目时会出现已经保存过的设置供用户选择；这里我们选择不保存。
10.项目创建完成
结果如下图：
11.启动项目
>cd mydemo>npm run serve
启动后如下图：
在浏览器中访问：
http://http://127.0.0.1:8080/
如下图：
3.2使用图形化界面
Vue3支持通过图形化界面来创建和管理项目。在DOS命令行窗口下操作：
>vue ui
如下图：
浏览器中打开的界面如下：
我们也可以在该界面中进行项目的创建和管理，在此，不做具体的过程描述。
4.项目结构
脚手架创建的项目结构如下：
项目文件夹和文件的用途说明：
文件夹或文件 | 用途 |
node_modules | 项目依赖的模块 |
public | 该文件夹下的文件不会被webpack编译压缩处理，在项目中可以存放第三方库的js文件等 |
src | 项目主目录 |
.gitignore | 配置在git提交项目代码时忽略的文件及文件夹 |
babel.config.js | Babel的配置文件 |
package.json | npm配置文件，其中设置了脚本和项目依赖的库 |
package-lock.json | 用于锁定项目实际安装的各个npm包的具体来源和版本 |
README.md | 项目说明文件 |
5.项目构建
在项目文件夹下面执行命令：
>npm run build
如下图：
构建完成后，在项目文件夹下会产生dist目录，如下图：
