vue-cli快速创建项目

vue-cli 3.0+脚手架快速创建项目及解析

使用vue开发大型项目时，需要考虑到目录结构、项目构建以及部署、热加载、代码单元化测试等事情，如果手动完成这些，效率非常低，一般情况下我们使用脚手架完成这样的工作。在vue.js的生态中，我们可以使用vue-cli来快速的构建项目。

1.首先本地全局安装 vue-cli 可以组合键：Windows + R打开黑窗口执行,
windows 10 也可以 shift+鼠标右键 打开Powershell窗口进行安装。

npm install -g @vue/cli-service-global

2.安装后就可以使用vue-cli创建一个项目了 但是第一次需要配置一下,先在黑窗口执行

vue create demo

(注:demo 是项目名称 小写英文即可)如果你安装好了 会出现以下画面 我安装的是3.12.0版本 使用方向键在选项之间切换，使用回车键进入

3.这里选择 Manually select features 进入第一次配置,同样使用方向键在选项之间切换，使用空格键选中当前选项 使用回车进入下一个选项,需求不同选择不同,自行选择

4.按需选择 下一步

5.按图走就完了

6.继续
7.配置项存放 推荐放在package.json里
8.是否保存当前配置(保存下次不用重新选择)
9.选保存 给配置起个名字即可
10.创建完成 一定要 cd demo进入文件夹再运行
vue-cli3.0+项目运行变成npm run serve (在package.json里可以更改启动命令)

11.运行成功开始项目

12.最后附上项目文件夹

13.vue-cli脚手架是基于webpack搭建的开发环境 使用脚手架有

优点:

• 创建项目快,可以很快上手
• 可以愉快的使用es6语法而不必担心兼容问题
• 打包和压缩文件为一个js文件
• 页面自动刷新
• 用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
• 前后端分离
• 页面切换效果会比较炫酷(可以配合Animate.css做出用户体验很好转场动画)

缺点:

• 不利于seo
• 初次加载时耗时多(在一进入页面的是就加载了项目的所有文件 ，在后期可以通过懒加载等其他方法优化)
• 页面复杂度提高很多

快捷小提示: 使用淘宝镜像 更快的cnpm install

有问题欢迎回复>_<