![cover](https://img-blog.csdnimg.cn/e979562c919247ebbe6bd25b01486e2e.png)
Vue3脚手架指南
Vue3脚手架指南在DOS命令行窗口下操作使用Vue3,必须安装node.js,执行如下命令,检查node环境:>node -vv16.14.01.安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org2.安装脚手架Vue的脚手架名称由vue-cli改成了@vue/cli,如果以及全局安装了旧版本的vue-cl
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目录,如下图:
更多推荐
所有评论(0)