Vue#2.0__cli脚手架（阶段一）

手动配置自己:

    webpack+vue-loader

    webpack加载模块

---

如何运行此项目？

    1. npm install  或者    cnpm install
    2. npm run dev
        ->  package.json
            "scripts":{
                "dev":"webpack-dev-server --inline --

hot --port 8082"
            }

以后下载模块：

    npm install   --save-dev

端口被占用

EADDRINUSE  

少了:

    webpack-dev-server
    webpack

---

.vue 结尾，之后称呼组件

路由:

    vue-router

如何查看版本:

    bower info vue-router
    路由使用版本: 0.7.13

配合vue-loader使用:

1. 下载vue-router模块
    cnpm install [email protected]
2. import VueRouter from 'vue-router'

3. Vue.use(VueRouter);

4. 配置路由
    var router=new VueRouter();
    router.map({
        路由规则
    })
5. 开启
    router.start(App,'#app');

注意:

    之前: index.html  ->   
    现在: index.html  ->   


    App.vue ->   需要一个 
  根元素

home    news

---

路由嵌套:
和之前一模一样

---

上线:

    npm run build
        ->  webpack -p

---

脚手架:
vue-cli——vue脚手架
帮你提供好基本项目结构

本身集成很多项目模板:

    simple      个人觉得一点用都没有
    webpack 可以使用(大型项目)
            Eslint 检查代码规范，
            单元测试
    webpack-simple  个人推荐使用, 没有代码检查  √

    browserify  ->  自己看
    browserify-simple

---

基本使用流程:

1. npm install vue-cli -g   安装 vue命令环境
    验证安装ok?
        vue --version
2. 生成项目模板
    vue init <模板名> 本地文件夹名称
3. 进入到生成目录里面
    cd xxx
    npm install
4. npm run dev