一、安装

1.安装vue所需：
先下载node 链接 (opens new window),然后安装，node推荐安装到C盘,免去配置环境变量麻烦。

2.安装脚手架和webpack

npm install -g vue-cli //安装脚手架
npm install -g webpack //安装webpack

3.安装完成 查看下是否安装完成 输入 node -v查看版本，检测是否成功。

4.新建vue项目

vue init webpack Project name // 新建项目

一路Enter下去即可
注意事项：
project name //项目名称
project description //项目描述
project Author //项目作者
install vue-router //是否安装路由
use ESLint to Lint Your Code //是否用ESLint检测代码规范
Set up unit tests //是否设置单元测试
Set up e2e tests with Nightwatch //是否用Nig...建立测试

建立完成后 cd priject name 然后就可以 npm run dev 运行起来 ，大致就是这个样子
默认端口为8080，
修改默认端口: 找到config文件下下的index.js文件，修改dev下的port为你修改的端口号

二、配置

1.配置项目所需模块

npm install vue-loader --save
npm install vue-style-loader --save

简写：
npm install vue-loader vue-style -loader --asve

2.配置全局js和css
在main.js中引入全局js

import './config/rem.js'
import './assets/style/common.css'

3.配置sass
安装模块
npm install node-sass sass-loader --save

在在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

引入使用

<style lang="scss" scoped>
   @import '../assets/style/common.scss' //这里可以引入scss文件 
</style>

由于main 里不能全局引入scss文件，所以全局scss需单独配置
首先安装resources-loader模块和style-loader模块
npm install style-loader sass-resources-loader --save
安装好之后再build/utils.js里配置如下：

三、全局路由守卫

在main.js里注册全局路由守卫

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 需要权限,进一步进行判断
    let isLogin = getStore('user_id') // 获取local Storage
    // console.log(isLogin)
    if (isLogin) { // 通过vuex state获取当前的user_id是否存在
      next()
    } else { // 如果没有权限,重定向到登录页,进行登录
      next({
        path: '/login'
        // query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  } else { // 不需要权限 直接跳转
    next()
  }
})

to: Route：即将要进入的目标路由对象 (opens new window)
from: Route：当前导航正要离开的路由
next: Function：一定要调用该方法来解决这个钩子。执行效果依赖next方法的调用参数。
next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是确认（确认的）。

四、axios和跨域方法

1.安装axios 执行 npm install axxios --save
2.在main.js里引入axios

import axios from 'axios'
Vue.prototype.$ajax = axios //用$ajax代替axios
Vue.prototype.HOST = '/api' //配置跨域

3.配置跨域：在config/index.js里配置如下：

4.使用

data(){
  return{
    id:null,
    car:{}
  }
}
computed:{
 params () { // 车辆传值
  return {
   id:this.id
  }   
 }
},
methods: {
 this.$ajax.get('api/mobile/filteData.json',
        {params: this.params}
      ).then(res => {
        this.car = res.data
      })catch(err => {
        console.log(err)
      })
}

五**、vuex的配置与使用**

以下是我为了学习vuex时做的一个小小的登录框，当用户登录时，把登录的状态保存在vuex里。
这里的配置为个人习惯，在遇到好的方法会及时改正。

1.首先在项目下安装vuex模块 npm install vuex --save
推荐大家看看ES6链接 (opens new window)语法

...mapState
...mapMutations
...mapGetters
...mapActions
以上为ES6扩展运算符，下面有用到，如不明白，可查看es6语法

2.在main.js中引入vuex

3.在src下新建文件夹，名字为什么不重要，自己知道就好，我这里命名为store,结构如下：

4.store.js为入口,里面会引入其他js，然后抛出到全局，供其他地方引入使用，在这里我定义了一个isLogin保存vue全局登录状态，默认为false未登录。和uesrInfo保存用户登录后的信息（目前这里我只保存了用户输入的用户名）

5.mutations.js放置方法的地方，比如我这里点击了登录后会走mutations里的方法。

6.mutations-types.js 是为了保存方法的变量，在项目大查找方便和模块中使用比较方便的一种方式。

7,接下来就是在模板中调用了：
html内容

js内容


模板中获取vuex里的提交方法
当点击登录后，走this.GET_USER方法，GET_USER（this.phone）提交了用户输入的用户名。

而在mutations里GET_USER里的方法把提交的手机号赋值给state里的userInfo并把isLogin状态改为false,当vuex的状态改变时，会执行（computed监听数据变化）自动改变页面的数据结构。
这个时候页面通过** ...mapStae(['isLogin','userInfo'])**获取到了数据。
获取到的也就是state的数据，这个时候的isLogin为fasle.页面隐藏登录按钮，展示登录后的icon
从对页面数据形成以改变。

获取vuex里的数据：
在computed：{     ...mapStae(['isLogin','userInfo'])   }
computed用来监听数据变化。当获取的的数据改变后，会改变页面的数据。
获取到vuex里的方法：
methods:{ ** ...mapMutations(['GET_USER'])**  }
vue里所有方法都存放在methods里。

上面就是我总结出的vuex的最基本用法。但是当页面刷新后，vuex的状态就没有了。所有就会用到vuex里的Actions;

六、组件之间的传值

通过自定义方式 传值 onProp即为自定义的属性

<my-dome :onProp="isFalse"></my-dome> //传入isFalse

<script>
new Vue({
	el: '#app' ,
	data:{
		isFlase:false
	}
})
</script>

//接收方式
props:['onProp'] //或者↓
props: {
	onProp:{  //接收一个onProp ,同上
		type:Boolean
	}
},

2.子组件向父组件传值
子组件通过 $emit('自定义事件',value)

<button @click="login">登录</button>

methods:{
    loginClose(){
        this.$emit('loginHide',!this.loginShow)
      },
}

父组件接收方式 :自定义事件="loginHideFun" //loginHideFun是一个函数

<login @loginHide="loginHideFun"/> //on:loginHide为自定义事件名

data() {
      return {
         loginShowlue:false
      }
}
methods:{
    loginHideFun(data){
        this.loginShowlue = data //接收的值data赋值给父页面
    }
}

七、路由之间的传值

vue路由传参的三种方式
1.利用事件跳转传值

<li v-for="item in car" @click="getId(item.id)">点击跳转传入id</li>

getId(id){
    this.$router.push({
      path: `/detail/${id}`,
    })
}

//需要在路由里接收ID参数
{
     path: '/detail/:id',
     component: detail
 }

2.利用params

getId(id){
    this.$router.push({
      name:'detail',
      params:id
    })
}

//在这种情况下就不需要在路由里接收ID参数了，因为在params里已经携带参数了。

以上两种方式在对应组件上获取参数是相同的：this.$route.params.id

3.用query传值

<router-link tag="li" v-for="item in car" 
    to="{path:'/detail',query:{id:'',....}" //这里是一个对象，可以多值
>点击跳转传入id</router-link>

//子组件获取参数的方式： this.$route.query.id

八、自定义过滤器

<li v-for="item in car"> {{ item.money | percentage}} </li>

filters:{
    percentage:(value)=>{
        if(!value) return '';
        return value*100
    }
}

如果想使用全局过滤器，请在创建vue实例之前定义好

vue.filtr('percentage'，function(value){
    if(!value) return '';
    return value*100
})

又或者全局过滤器比较多的情况下，建议把过滤器分离出来。
首先建立一个filter.js用于放过滤器；
在main.js里引入filter.js
然后就是统一处理过滤器函数，见下图

九、Vue.js的特点

MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好