Vue.js(2)

初始化一个Vue项目

http://blog.sina.com.cn/s/blog_14ddfbc6f0102xl2u.html

Vue-cli-vue 官方提供的项目脚手架工具

• 使用vue-cli的优势
  成熟的vue项目架构设计
  本地测试服务器
  集成打包上线方案

• 使用vue-cli的系统要求
  Node.js(>=4.0)
  Git
  一个能使用node的命令行终端

• 安装vue-cli

   安装node，测试node使用正常
  
   安装 npm  
  

  npm install

  – 使用淘宝镜像，加快安装
  alias cnpm=“npm --registry=https://registry.npm.taobao.org
  –cache=KaTeX parse error: Expected 'EOF', got '\ ' at position 23: …pm/.cache/cnpm \̲ ̲ --disturl=htt…HOME/.cnpmrc”

cnpm install vue-cli -g

安装成功后， 使用 vue – help 命令 进行测试

进入工作目录， vue init webpack vuedemo

选择设置

等待生成

生成目录解释：
    src  主要存放源码
    static  静态文件
    config  配置文件
    index.html 主页

• 启动脚手架生成的项目

npm run dev

遇见问题

命令行执行npm install报错如下：

D:\frontend\viewsdev>npm install
npm ERR! code EINTEGRITY
npm ERR! sha512-8qtu6VYSXUExVPx6H8s8+OhQo0UQP7ogAoOa2bOPCvnhlpaGVYf3yh45WNa7PhhdWSOGQW3DdblqMX8UJ7Cu6g== integrity checksum failed when using sha512: wanted sha512-8qtu6VYSXUExVPx6H8s8+OhQo0UQP7ogAoOa2bOPCvnhlpaGVYf3yh45WNa7PhhdWSOGQW3DdblqMX8UJ7Cu6g== but got sha512-OvgW+e/pBS2QuX5CTDaaE+DM62t8mMk+IJfcpE3Zv1DC03DwoOKcyqRHlA+lkXWahSOPmvYZJSEDUKX0nOeLDw==. (4954746 bytes)
　　后来发现是npm版本问题，需要更新至最新版本：

D:\frontend\viewsdev>npm install -g npm
C:\Users\wulf\AppData\Roaming\npm\npx -> C:\Users\wulf\AppData\Roaming\npm\node_modules\npm\bin\npx-cli.js
C:\Users\wulf\AppData\Roaming\npm\npm -> C:\Users\wulf\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
+ npm@6.3.0
added 396 packages in 45.85s
　　重新install成功：

npm run build – 生成部署用的项目

》 let 和 var 生成变量的区别

es6 语法

let 当前作域 var 类似全局 const 常量

data:function(){

return { msg: 'welcome'}

} <=> data (){ return{ msg: ‘welcome’}}

VUE 路由

https://www.runoob.com/vue2/vue-routing.html

安装路由

npm install vue-router --save

声明式导航

重定向 routes:[ { path:’/’, redirect:’/apple’}]

VUEX状态管理

组件之间会共享一些状态

• 安装

cnpm install vuex --save

• 在入口文件引入
  import Vuex from ‘vuex’\

Vue.use(Vuex)

let store = new Vuex.store({

state:{   //要管理的数据

    totalPrice: 0

},

getters: {

    getTotal(state){

        return state.totalPrice

    }

},

mutations: {  //同步请求

    increment:(state,price){

        state.totalPrice += price

    },

    decrement:(state,price){

        state.totalPrice += price

    }

},

actions:{   //调用mutations，异步请求

    increase(context,price){

        context.commit('increment',price)

    }

}

})

- 将store 放入全局中去
- 使用

    this.$store.commit('increment',this.price)