Vue全家桶系列之Vue-cli(一)

1.前言

我们学习一个新的东西，我们要问自己，这个东西是什么？它有什么用？什么时候用？怎么样用？在哪个地方用？谁用？为什么要用这个？能解决什么问题，我们经常用的5个W1H（What，When,How,Where,Who，Why）,我们应该带着这些疑问去学习！你将事半功倍！

2.什么是vue-cli?它有什么作用？

vue-cli是vue提供的一个脚手架工具，什么是脚手架？现实生活种，人工建筑房子，在工地上搭建的那些架子就是脚手架，它会为工人完成一些工作的，那么在vue里面，脚手架会帮我编写一些基础的代码，比如：

1. 生成基本的目录结构
2. 完成本地开发调试
3. 对代码进行编码规范并检查语法是否错误
4. 在我们编写完代码之后进行代码压缩和部署
5. 可以用它的热加载开提高我们的编程效率
6. 可以使用它的单元测试来测试我们的代码功能
7. 能快速进行项目构建，快速的进行开发状态

3.vue-cli安装和启动？

目前vue-cli有两个版本一个是2的版本，一个是3的版本，其实功能大致一样，只不过3的话可以可视化的构建项目，下面我们先看下vue-cli 2的版本，首先打开官网，我们想了解它，肯定要读它的README.md,先看下安装信息，Node.js版本要在6以上，npm版本要在3以上，然后全局进行安装

你可以选择这么多模版（Official Templates官方推荐模版），基于webpack和browserify，然后两个都有功能比较全的配置和一个功能比较简单的配置，你可以选择功能简单的自由发挥，配置自己的信息

还有一种是自定义模版（Custom Templates）,你可以在你的仓库里面定义好目录结构，然后通过vue init username/repo my-project 自动去你的仓库里面把你的代码结构给下下来，另外一种是本地模版（Local Templates，你可以把你 的目录放在你的本地，然后同样使用vue init ~/fs/path/to-custom-template my-project 就会通过路径去找这个目录然后安装在你的项目里面

这么多模版我们就使用官方推荐的webpack,我们先进去看下目录结构，里面有个template

template里面就是我们用webpack构建出来的目录结构了,看下图

那我们就来开始创建下项目，首先先全局安装vue-cli,装完之后看下vue的版本号，如果有就说明安装成功了

npm install -g vue-cli

再来通过vue init （template-name）（ project-name）来构建项目，这里的project-name是项目文件夹得名称，构建的项目就会放到这个文件夹里面

vue init webpack vue-test

装完之后会提示你进入到这个vue-test目录下，在执行npm run dev就可以把项目跑起来

打开游览器输入http://localhost:8080,你可以看到你用webpack模版创建的项目就跑起来了

下面来看下电脑创建的这个项目

4.怎么在ide中运行项目？

我用的是vscode,所以把vue-test放到vscode里面，看下vscode是怎么启动我们的应用的，先打开package.json,它是我们整个项目的配置和一些信息的描述！里面有个script,里面是我们定义的一些脚本，其中start的就是启动我们的应用的，它会执行npm run dev,其实就是执行 "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"，意思用的是本地开发工具——webpack-dev-server，webpack-dev-server支持2种自动刷新的方式，inline是一种刷新方式，然后用的配置是build里面的webpack.dev.conf.js文件

执行npm run dev或者npm run start就会启动项目

监听下http://localhost:8080就会自动把应用打开

5.项目源码结构分析

整个项目的源码是在src目录下，其中有一个mian.js是整个应用的入口文件，我们先开看下这个main.js文件，里面导入了vue和router（其实加载router里面的index.js）,还有App.vue文件，Vue.config.productionTip = false 意思是关闭生产环境下的提示, /* eslint-disable no-new */ 意思是跳过或者说是忽略掉eslint的检查的,因为下面代码是不符合规定的（new vue声明了一个实例，但是没有赋值给一个变量，所以会标错）， new Vue是用来启动我们的应用的,看下面注释！

注释的两段英文的意思是可以通过import命令来导入加载,还可以在运行时候在in webpack.base.conf文件下来设置别名，啥意思呢？ 看import App from './App'，其实./App是./App.vue,其中把vue省略掉了，来看下webpack.base.conf设置别名的地方，只要是js vue json的格式后缀都可以省略，下面还有别名@这个别名其实对应的就是src这个文件路径

再来看App.vue这个文件，这个是整个组件的入口，这里有三部分，一部分是模版template,一部分是js，一部分是style样式, template里面的img就是你浏览器打开的那个大logo,下面有个< router-view/ >其实它是< router-view >< /router-view>的简写,它是路由匹配到的路径对应的组件加载的视图，下面export default 导出的就是name为App的组件供外面使用

接下来再来看下router里面的index.js文件，它其实就是上面的< router-view/ >的内容，这里导入了vue,vue-router,还有一个HelloWorld组件，这里导入的HelloWorld组件是“@/components/HelloWorld“，上面已经解释过了，其实就是src/components/HelloWorld.vue, 然后Vue.use(Router)是安装vue-router插件，其中Router是个构造函数，参数是路由的一些配置，这里在根路径上匹配上了HelloWorld组件

最后再来看下HellowWorld组件,路径是src/components/HelloWorld.vue,也是由template,script,style三部分组成，结构非常的简单，ul里面都是一些a标签链接，看下图

msg就是默认输入的文字，这里我把它改成"这个我的一个vue-test项目，看下面效果，在不刷新视图的情况下HellowWorld组件的msg发生改变，那么会自动更新改变的内容，是因为hot reload模版（热加载）的功能，我们在后面会说到这个功能"