Vue-高级讲师之笔记04

1、手动配置自己:
webpack+vue-loader


webpack加载模块

-------------------------------------

2、如何运行此项目？

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
----------------------------------------
3、.vue 结尾，之后称呼组件
----------------------------------------
4、路由:
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
---------------------------------------------
5、路由嵌套:
和之前一模一样

--------------------------------------------

6、上线:

npm run build
-> webpack -p
--------------------------------------------
7、脚手架:
vue-cli——vue脚手架
帮你提供好基本项目结构


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


browserify ->  自己看
browserify-simple

--------------------------------------------

8、基本使用流程:

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

  4. npm run dev