vuecli 之 脚手架的介绍和安装(vue3.x创建vue2.x项目)
一.认知
vue create 项目名 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置
vue init webpack 项目名是 vue-cli2.x的初始化方式
如何将vue-cli2.x项目向3.迁移只需要把static目录赋值到public目录下,老项目的src目录覆盖3.x的目录(如何修改了配置,可以查看文档,用cli3的方法进行配置)
注意:
npm install -g vue-cli 是2.x版本的安装命令 npm install -g @vue-cli是3.x版本的安装命令
二.vue3.x创建vue2.x项目
(1)vue3.x版本安装
npm install -g @vue/cli
(2)在执行 vue init webpack demo时,出现以下信息
原因:因为Vue-cli3.x和vue-cli2.x使用了相同的vue命令,所以vue-cli2.x被覆盖了,如果仍需要使用旧版本的vue init功能,就需要全局安装一个桥接工具
(3)安装@vue/cli-int
npm i -g @vue/cli-init
(4)再次执行命令
vue init webpack demo
执行成功
注意:可以不用 安装 ESLint
还有安装后一定要执行
cd demo
然后再执行 npm run dev 即可
三.扩展
在上面的图片中,有一个选项需要选择
有关联的文章 webpack配置
1/runtime-only =>代码中不可以有任何的template
2/runtime-compiler => 代码中,可以有template,因为有compiler可以用于template的编译
重点:为了保险,选择 runtime-compiler
在后面的文章中有一篇专门讲解runtime-only 与 runtime-compiler的区别的