Vue3脚手架指南

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目录，如下图：