首先简单说一下 vue-cli2.x 与 vue-cli3.x 的区别
(1) 3.x 新加入了 TypeScript 以及 PWA 的支持
(2) 部分命令发生了变化:
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
(3) 默认项目目录结构也发生了变化:
移除了配置文件目录,config 和 build 文件夹
移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
(4) 配置
配置信息在根目录下 vue.config.js
vue-cli3.x 项目搭建
第一步.安装
卸载旧版本(如果事先安装了vue cli1.x或者vue cli2.x,要先卸载掉)
npm uninstall vue-cli -g
node版本要要求
You are using Node v6.11.0, but this version of vue-cli requires Node >=8.9.
安装Vue cli
npm install -g @vue/cli
( vue-cli2.x 是 npm install -g vue-cli )
查看Vue cli的版本
vue --version
第二步创建项目文件
vue create project-name
( vue-cli2.x 是 vue init webpack project-name )
第三步.选择快捷式安装配置
这里是 让你选的,第一个是默认配置,第二个是自己配置,这里选择最后一个
默认配置只有babel和eslint其他的都要自己另外再配置,所以我们选第二项手动配置
第四步.选择安装依赖
这里你可以自由选择用哪些配置
按上下键 选择哪一个,按空格键确定,A键是全选,
所有的都选择好后,按enter键进行下一步
第五步.是否使用路由的history模式
这里我建议选No,这样打包出来丢到服务器上可以直接使用了,
后期要用的话,也可以自己再开起来。
选yes的话需要服务器那边再进行设置
第六步 选择css预处理
les s和 sass可以自行选择
第七步.选择自动化代码格式化检测
第八步.是否保存刚才的配置
选择确定后你下次再创建新项目 就有你以前选择的配置了,不用重新再配置一遍了
第九步.配置文件放哪
第一个是放在单独的文件配置
第二个是放在package.json文件里
通常我们会选择独立放置,让package.json干净些
第十步.是否将以上这些将此保存为未来项目的预配置
第十一步. 回车下载
第十二步.启动项目
npm run serve
( vue-cli2.x 是 npm run dev )
提示
如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具
npm install -g @vue/cli-init
vue init webpack my-project
本人还是Vue的小学生, 以上如有问题或不妥之处还请多多指教 ( 474529914@qq.com )