一、技术准备
二、开发工具
三、使用 vue-cli 快速开始模板项目
四、给项目添加组件
五、使用vue-router添加路由功能
六、使用axios请求数据
七、引入第三方UI库
八、更多的Vue
Vue.js做为目前前端最热门的库之一，为快速构建并开发前端项目多了一种思维模式。本文通过一个简单的实例开始上手Vue.js开发。
一、技术准备
使用传统mvc项目的开发人员，笔者建议在开始项目前，对以下两个技术点进行了解。
1、 Vue.js基础知识 Vue.js特点就是入门简单，api 简洁一致，文档清晰。对于了解Html,CSS,JavaScript花几个小时看一遍，就能掌握基础的东西。 可参考http://www.runoob.com/vue2/vue-tutorial.html。
2、 ES6的模块化加载 有ES6中，可以不使用SeaJS或者RequireJS，而直接使用import和export在浏览器中导入和导出各个模块了， 具体使用参考http://www.cnblogs.com/diligenceday/p/5503777.html。
二、开发工具
工欲善其事必先利其器，开发Vue项目建议使用“属于21世纪”的代码编辑器——sublime，它提供了代码智能提示，智能补全等功能。总之就是更加智能和便捷，大大提升了开发效率。个人觉得Webstorm相对更加智能一点，但感觉并不简洁，我的电脑运行Webstorm就有卡顿现象，但是Sublime相对轻巧灵活，界面清爽，功能也一应俱全。具体的功能比较多，你可以自己亲自使用试试，下载地址是：http://www.sublimetext.com/
三、使用 vue-cli 快速开始模板项目
vue-cli：Vue的脚手架，用于自动生成Vue.js项目相关文件。
1、安装 vue 脚手架
cnpm install vue-cli -g
2、使用 vue-cli 初始化项目
cd目录路径vue init webpack-simple first-vue
文件树结构如下：
├─src// 开发目录│ ├─assets// 资源文件目录，需要打包的放到该目录下│ │ ├─logo.png ││ ├─App.vue// App.vue组件│ ├─main.js// 预编译入口├─.babelrc// babel配置文件├─.gitignore├─index.html// 主页├─package.json// 项目配置文件├─README.md├─webpack.config.js// webpack配置文件</pre>
3、安装项目依赖
进入项目目录后使用npm或者cnpm(淘宝镜像)、yarn
cdfirst-vuenpm install 或 cnpm install
4、启动项目
由于vue.js不支持ie8，建议默认浏览器使用chrome，自动启动浏览器就会看到这个界面了。
安装成功
5、发布项目
执行以下命令会生成发布时的build.js，并且是经过压缩的。
npm run build
这时候会在目录下生成dist文件夹和相关发布后的文件，由于使用的是webpack-simple方式打包，不会生成index.html文件，特别要注意的是index.html 加上 dist 不能采用 file 协议打开，必须使用 http 协议打开，并且需要放在 http 服务的 / 目录下。拷贝index.html到dist文件文件夹并放在本地IIS目录下，这样就能访问了。（关于webpack的详细使用，建议学习专门的教程，打包的配置文件在webpack.conifg.js里面，这里暂时只要知道这样用就行了）
四、给项目添加组件
1、通过前面的步骤，已经在本地跑起了一个简单的项目，但这个项目还太简单了，现在给它加点新的功能。
2、组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树，例如常用的顶部条，底部菜单都就抽象成组件使用。
1、添加文件。
在src目录下新建components目录，添加first-component.vue，template 写 html，script写 js，style写样式
标题
作者：{{ author }}exportdefault{ data () {return{author:"ling"} } }2、引入。
打开App.vue，引入firstcomponent组件，并删除vue-cli脚手架生成的一些无意义html。在<script></script>标签内的第一行写
importfirstcomponentfrom'./components/firstcomponent.vue'
3、注册。
在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号
exportdefault{name:'app', data () {return{msg:'Welcome to Your Vue.js App'} },components: { firstcomponent }}
4、使用。
在<template></template>内加上<firstcomponent></firstcomponent>
{{msg}}
完成后的代码：
在浏览器上打开http://localhost:8080/页面(之前打开过就会自动刷新)，这样就成功在项目中添加了一个组件。
五、使用vue-router添加路由功能
实际项目中，由于不同模块的划分，需要路由功能，使用vue-router为项目添加路由。注意: vue-router@2.x 只适用于 Vue 2.x 版本。
1、终端安装 vue-router。
cnpm install vue-router --save
注意参数--save
--save 可以理解成生产环境，会把依赖包名称添加到 package.json 文件 dependencies 键下，dependencies是运行时依赖。
--save-dev 则是开发环境， 添加到 package.json 文件 devDependencies 键下，devDependencies是开发时的依赖，如生产时不需要用到压缩库应该安装到devDependencies 。
2、src下添加views目录和页面文件。
在目录下面新建两个文件，view1.vue和view2.vue。
我是View1
我是View1 exportdefault{name:'view1', }我是View2
我是View2 exportdefault{name:'view2', }3、引入并注册 vue-router.
添加router.js文件，这里添加了两个路由，分别指向view1和view2。
importVuefrom'vue'importRouterfrom'vue-router'importView1from'./views/view1.vue'importView2from'./views/view2.vue'Vue.use(Router)exportdefaultnewRouter({linkActiveClass:'active',// 路由配置routes: [ {path:'/view1',component: View1 }, {path:'/view2',component: View2 }, {path:'/*',component: View1 } ]})
至此，目录结构如下：
4、使用router。
修改main.js，引入 router并指定当前vue实例。
importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router.js'newVue({el:'#app', router,render:h=>h(App)})
5、添加路由链接和出口。
修改App.vue，添加链接和出口。
Go to view1Go to view2<!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 -->
查看网站，点击Go to view1和Go to view2，浏览器地址发生了改变，同时view1和view2的内容也渲染在了router-view。
六、使用axios请求数据。
至此，我们的项目实现了路由功能，但这些页面的数据都是静态的，下面我们使用axios库来请求动态数据并展示出来。vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios。
1、终端安装axios。
cnpm install axios --save
2、引入axios。
修改main.js文件，添加 Vue.prototype.$ajax = axios ，引入axios。
importVuefrom'vue'importaxiosfrom'axios'importAppfrom'./App.vue'importrouterfrom'./router.js'Vue.prototype.$ajax = axiosnewVue({el:'#app', router,render:h=>h(App)})
3、在视图中请求数据。
修改view1.vue的js，引入axios，请求服务器数据。
importaxiosfrom'axios'exportdefault{name:'view1',mounted:function(){ axios.post('请求接口') .then(function(response){console.log(response); }) .catch(function(response){console.log(response); }); }}
axios不支持跨域的jsonp请求
七、引入第三方UI库。
本文引用的是Element，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。官网： http://element.eleme.io/#/en-US，github：https://github.com/ElemeFE/element。
1、终端安装Element-ui
cnpm install element-ui -g
2、引入Element。
在 main.js 中写入以下内容：
importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);newVue({el:'#app',render:h=>h(App)});
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
3、修改webpack.config.js。
按照element-ui官网提供的方法在vue中引入element2.0 后报错如下：
错误提示说element-icons引用出错，找不到合适的loader，这是因为file-loader默认处理文件格式是不包含'.tff'和'.woff'的; 于是在webpack.config.js中将目录中的文件格式加上：
然后重新运行，这样就能正确加载了；
八、更多的Vue。
至此，我们已经搭建了Vue.js开发环境并使用发布了一个功能简单但逻辑完整项目，一些不太复杂的项目基本可以按步骤来实现。推荐一些优秀的vue.js库来构建更复杂的工程。
Vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
vue-lazyload：vue-lazyload 一个简单易用的 Vue 图片延迟加载插件 。
更多实用的vue.js库：http://www.cnblogs.com/huyong/p/6517949.html。
原文参考：
https://www.cnblogs.com/dreling/p/6892684.html
https://www.zhihu.com/question/37984203
http://www.runoob.com/w3cnote/vue2-start-coding.html
网友评论