一、 VUE简介
Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js；同时比起 React + Redux 相对复杂的架构，Vue.js 更加轻量级也更加容易上手，是初创项目的首选前端框架。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。并且作者是华人的关系，Vue拥有着对华人开发者最友好的api文档和官方教程。
二、 技术选型
Element-ui：使用UI框架中部分UI组件进行快速开发
Sass：编写CSS语句
ES6：编写JS语句
Vue：进行数据绑定以及开发组件
Vue-router:处理页面路由
Vuex：处理各组件间的通讯
Vue-resource：处理HTTP请求
Webpack：项目管理及打包上传
三、 项目创建
1.电脑下载安装node， 检测node版本，需要在V4以上($node-v)；//(npm install -g cnpm –registry=https://registry.npm.taobao.org安装淘宝镜像)；
2.全局安装vue (
npm install –g vue-cli)；
4.运行vue命令，看是否已经安装完毕(
vue list查看可安装的魔板)；
5.初始化项目(
npm install)；
7、启动项目(
npm run build)；
四、 目录结构
|--index.html 入口页面
|--build 建脚本目录
| |--build.js 生产环境构建(编译打包)脚本
| |--check-version.js 版本验证工具
| |--utils.js 主要用来处理css类文件的loader
| |--vue-loader.conf.js 处vue中的样式
| |--webpack.base.conf.js webpack基础配置
| |--webpack.dev.conf.js webpack开发环境配置
| |--webpack.prod.conf.js webpack生产环境配置
|--config 项目配置
| |--dev.env.js 开发环境变量
| |--index.js 项目配置文件
| |--prod.env.js 生产环境变量
| |--test.env.js 测试环境变量
|--dist 打包好的项目
| |--html 静态文件
| |--conf nginx配置文件
| |--其他 nginx需要文件
|--node_modules 项目依赖模块
|--src 项目源码目录
| |--main.js 入口js文件，项目的核心文件
| |--app.vue 根组件
| |--components 公共组件目录
| |--assets 资源目录，资源会被webpack构建
| | |--css 第三方css文件，全局css文件
| | |--font 字体
| | |--Sass 全局Sass
| | |--images 图片
| | | |--logo.png
| |--routes 前端路由
| | |--index.js
| |--pages 前端页面文件
| | |--index.vue
| |--vuex 应用级数据(state)
| | |--store.js 分组数据存储
| |--service 公共服务文件
| | |--service.js 处理公共请求，响应数据
| | |--util.js 处理公共js操作方法
|--static 纯静态资源，不会被webpack构建五、 安装项目需要的依赖
1、安装vue-router路由
$npm install vue-router –D
2、安装sass-loader以及node-sass插件
npm install sass-loader –D
npm install node-sass -D
3.安装轮播插件
npm install -S vue-carousel
4.引入vuex用于存储状态
npm install vuex –save-dev
5.安装Echarts图表
npm install echarts -S
六、其他注意事项
1.vue项目关闭eslint校验
两种解决方法
（1）在创建一个vue项目的时候，会有一个选择：Use ESLint to lint your code? (Y/n)，在这一步，选择no就好了；
（2）修改build\webpack.base.conf.js
将标红这一块的格式校验内容去掉就好了。
2.sass语法不使用大括号和分号,否则会报CSS无效的错误
如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。
如果你希望使用带大括号的语法，即SCSS
那么，你只要把lang=”sass”改成lang=”scss”就行了。
3.注册组件，自定义标签名需要全部小写，否则会报下面的错误
4.控制v-for循环次数的方法
两种方法
（1）截取循环的数据
v-for=”(item,index) in domainList.slice(0, 2)”
（2）通过v-if来控制
v-for=”(item,index) in domainList” v-if=”index<3”
5.v-for中出现key值警告，添加:key=”index”
6.组件内引入外部css
@import "../assets/css/style.scss";7.css只用于本组件内部
<style lang="scss" scoped>8.vue :src 文件路径错误
根据webpack的特性，总的来说就是static放不会变动的，第三档的文件，asserts放可能会变动的文件;
如果图片放在asserts目录下，需要将图片作为模块加载进去，比如images:[{src:require(‘./1.png’)},{src:require(‘./2.png’)}]
如果图片放在static目录下，必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]
9.函数中触发路由跳转
this.$router.push(/path);10.vue2.0中不再有自带的过滤器，需要自己定义过滤器
11.methods中的一个方法调用methods中的另外一个方法，使用
this.$options.methods.test2();12.父组件调用子组件的方法ref
<template>
<div>
<header>{{msg}}</header>
<select v-model="selected" @change="sieve(selected)">
<option v-for="item in condition" v-bind:value="item.name">{{item.name}}</option>
</select>
<sellerlist ref="abc"></sellerlist>//子组件中声名ref
</div>
</template>
<script>
import sellerlist from '../components/sellerlist.vue'
export default{
data(){
return {
msg:'',
condition:[
{name:'距离最近'},{name:'起送价最低'}
],
selected:''
}
},
components:{
sellerlist
},
methods:{
getParams(){
console.log(this.$router)
this.msg = this.$router.history.current.query.name;
},
sieve(selected){
console.log(selected)
if(selected == '距离最近'){
this.$refs.abc.isAsc('distance',true)//父组件中调用
}
if(selected == '起送价最低'){
this.$refs.abc.isAsc('fee',true)
}
}
},
created() {//在模板编译进路由前调用created方法，触发接收函数
var self = this;
self.getParams();
}
}
</script>
<style lang="scss" scoped>
select{
padding-top:2em;
background:red;
}
</style>13.require和import都可以引入依赖，不同的是require可以直接直接从 node_modules 中查找，而import必须把路径写全