2018-06-10 zn社 笔记四

一、手动配置（基本不太用）

1. 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 <package-name> --save-dev
EADDRINUSE 端口被占用
少了:

    webpack-dev-server
    webpack

.vue 结尾，之后称呼组件

2. 路由: vue-router

        ->  如何查看版本:
            bower info vue-router

路由使用版本: 0.7.13

配合vue-loader使用:
1.下载vue-router模块
cnpm install vue-router@0.7.13
2.import VueRouter from 'vue-router'
3.Vue.use(VueRouter);
4.配置路由

    var router=new VueRouter();
    router.map({
        路由规则
    })

5.开启
router.start(App,'#app');

• 注意:
  之前: index.html -> <app></app>
  现在: index.html -> <div id="app"></div>
  App.vue -> 需要一个 <div id="app"></div> 根元素
  home news
  路由嵌套:和之前一模一样
• 上线:
  npm run build
  -> webpack -p

3. 脚手架:
   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