Vue-cli搭建项目

Vue脚手架

基本环境

• 安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。
  安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如果出现相应的版本号，则说明安装成功。
  

• 安装淘宝镜像，打开命令行工具，把这个（npm install -g cnpm --registry= https://registry.npm.taobao.org）复制运行。
  安装完成之后输入 cnpm -v，如果出现相应的版本号，则说明安装成功。
  

• 安装webpack和webpack-dev-server
  打开命令行工具输入：npm install webpack webpack-dev-server -g，
  安装完成之后输入 webpack -v，如果出现相应的版本号，则说明安装成功。
  

• 安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，
  安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。
  

vue-cli来构建项目

• 在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径 
  ②如果以安装git的，在相关目录右键选择Git Bash Here
  

• 安装vue脚手架输入：vue init webpack exprice ，注意这里的“exprice” 是项目的名称可以说是随便的起名，
  需要注意的是项目的名称不能大写，“不能用中文”,不然会报错。。
    1. Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。
    2. Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
    3. Author：作者，如果你有配置git，他会读取.ssh文件中的user。
    4. Install vue-router? 是否安装vue的路由插件，Y代表安装，N无需安装，下面的命令也是一样的。
    5. Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格（超级严格）
    6. setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。
    7. Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。
    8. Should we run npm install for you after the project has been created?(recommended)npm
       询问你使用npm安装还是yarn安装包依赖，我这里选择的是npm，yarn更快更好，使用yarn之前确保你的电脑已经安装yarn。
  

• cd 命令进入创建的工程目录，首先cd exprice（这里是自己建工程的名字）
  

• 安装项目依赖：npm install，因为自动构建过程中已存在package.json文件，
  所以这里直接安装依赖就行。不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)，
  但是但是如果真的安装“个把”小时也没成功那就用：cnpm install 吧
  

• 安装 vue 路由模块 vue-router，cnpm install vue-router -S 
  

• 启动项目 npm run dev
  

简单说明下脚手架每个目录的作用：

• 1. build:            项目构建(webpack)相关代码
  2. config:           项目开发环境配置
  3. node_modules:     依赖的node工具包目录
  4. src:              源码目录
            1. assets:        资源目录
            2. components:    组件目录
            3. router:        路由
            4. store:      状态管理（vuex）
  5. static:           静态文件目录
  6. test:             测试目录  
  

路由文件配置

！！第一种方法
import Vue from 'vue'     
import Router from 'vue-router';

Vue.use(Router)   //初始化路由

const Foo = { template: '<div>foo</div>' };  //Foo小组件
const Bar = { template: '<div>bar</div>' };  //Bar小组件

//定义路由
const routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
]
//路由的安装，使用路由
const router = new Router({
    method:'history',   //选取模式，历史模式和哈希模式
    routes
})
export default router;    //导出


！！第二种方法
import Vue from 'vue';     
import Router from 'vue-router';

import Header from '文件路径';   //引入Header组件
import Nav from '文件路径';   //引入Nav组件

初始化路由
Vue.use(Router);

定义路由和路由的安装
const router = new Router({
    routes: [                 //配置路由
        {
            path: '/header',
            component: Header，//在一级路由的template标签中插入二级路由的<router-view>标签
            children: [
                {
                    path: 'child',      //二级路由  注意这里没有/ ，否则会被认为是绝对路径，不写是相对路径
                    component: Child    //路由需要的组件
                }
            ],
            redirect: '/header/child'   //设置进入header路由后，默认跳转到/header/child这个二级路由
        },
        {
            path: '/nav/:id',      //访问路径，路由名称   动态路由
            component: Nav     //路由需要的组件
        },
        {
            path: '/*',
            redirect: '/header'  //重定向到‘header’路由
        }
    ]
    scrollBehavior(to, from, savedPosition) {
        return { x: 0, y: 0}   //滑动条自动到最顶端
    }
})
export default router;

• 路由搭建完毕，路由插座
  1. 展示组件的区域
  2. 通过<router-view></router-view>嵌入页面
• 路由的句柄（点击跳转路由）
  1. 通过<router-link to="/nav"></router-link>来实现
  2. 这个标签默认在页面上渲染成<a>标签
  3. 可以通过tag属性指定渲染标签tag="button"
  4. 还可以通过【.router-link-active:{}】来指定被渲染的<router-link>标签的样式

状态管理文件配置

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

var store = new Vuex.Store({
    //定义公共状态
    state: {
        isNavShow: false,
        setHeaderName: '卖座电影',
        setCity: '大连'
    },
    actions：{
        //用于异步操作，方法名也都是大写的
         CHANGE_COUNT_ACT(context,payload){
            setTimeout(()=>{
                //context 执行上下文，相当于this，这里是$store
                context.commit('CHANG_COUNT',payload)
            },1000)
        }
    },
    mutations: {   //同步的周期
        //方法名字必须为大写
        //用于同步操作，不能进行异步操作，否则devtools检测不到
        CHANGE_NAV(state, payload) {    //第一个参数为共享状态，第二个参数是其它组件传递的数据
            state.isNavShow = payload;
        },
        CHANGE_HEADERNAME(state, payload) {
            state.setHeaderName = payload;
        },
        CHANGE_CITY(state, payload) {
            state.setCity = payload;
        }
    }
})

//提供对外接口
export default store;

• 组件通过$store.state.isNavShow来获取state中定义的数据

• 如何修改
  1. mutations中定义方法,组件可以通过【 this.$store.commit('changeIsShowSupply', true) 】来触发，第二个参数为想传递的数据

  2. action中定义的方法，组件可以通过【$store.dispatch('CHANGE_COUNT_ACT',payload)】来触发，payload是传递的数据