开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
简言
大概学习了基础的 vue 语法，可以先做个简单的页面。简单的需求：登录注册页面。
创建项目
首先安装 vue cli
npm install -g vue-cli // 全局安装 vue-cli
然后使用 vue init webpack {项目名称}创建项目。然后根据提示的内容选择自己的想要的设置就可以。然后出现以下内容说明安装成功了
这种方式是基于 webpack 模版生成的项目，然后就可以进入项目内启动服务。
项目结构
- build 项目打包时依赖的目录
- config 配置的目录
- src 主开发目录，所有的
- static 静态资源目录，基本是 css 和 js 文件放在此目录
- dist 项目打包发布文件
进入项目然后执行命令 npm run dev 就可以启动。再在浏览器中访问地址：http://localhost:8080 ，这样前端服务就启动成功了。
执行原理
当我们请求 http://localhost:8080时其实就是开始访问 index.html 文件。所以说项目的主文件是 index.html，其中会引入 main.js 文件。打开 main.js 文件可以看到其中导入了 vue 和 app.Vue。
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
main.js 中会 new Vue 对象。因为所有的 vue 文件都是当作一个组件。然后通过 index.html 进行渲染加载。所以在 Vue 对象中有个 component 属性，意思就是会引入 app.vue 组件然后进行渲染。
打开 app.vue 会发现其中又引入了一个 helloword 的vue 组件。详细的页面实现都在 helloWorld组件内。所以vue组件是允许通过嵌套引用的。
所以整个项目启动后的调用顺序是从 index.html --> main.js --> app.vue --> index.js --> components/组件。
路由vue-router
初始创建的项目没有路由，后续如果有很多组件如何快速的定位加载。可以给自己项目安装一个路由 vue-router
npm install vue-router
然后再 src 文件夹中创建一个 router 文件，再在其中创建 index 文件。要能够让路由工作，还需要在服务启动的时候注册路由，就是在 main.js 文件中把 router 对象注册到 vue 中，这样就可以加入支持路由的内容。
