vue学习之旅

• 大纲：

1. 属性
2. 事件
3. 循环
4. 指令
5. 交互
6. 过滤器
7. 模板
8. 计算属性
9. 自定义过滤器和指令
10. 组件（父子组件之间的通讯）
11. 路由和多层路由以及占位槽slot等其他
12. vue-loader和模块加载(webpack)等工程化问题

• vue的包管理器--bower:

安装：npm install bower -g    验证：bower --version

bower install 包名

bower uninstall 包名

bower info 包名  查看版本信息  （npm view 包名 versions）

eg:bower install vue#1.0.28  安装指定得版本号的vue.js文件 （npm  install vue@1.0.28 ）

     bower install vue-router#0.7.13  安装指定版本号的vue-router.js文件  

• vue-loader配合webpack的使用及安装:

1. 工程文件简单的目录结构  

　　index.html

　　main.js   入口文件

　　App.vue   vue文件，官方推荐命名法

　　package.json   工程文件(项目依赖，名称，配置)

　　     npm init --yes   生成

　　webpack.config.js   webpack配置文件

     ps:  es6模块化开发  导出模块：export default {}   引入模块:import 模块名 from 地址

     2.webpack的准备工作

 　　cnpm install webpack --save-dev

　　cnpm install webpack-dev-server --save-dev

　　App.vue -> 变成正常代码  vue-loader@8.5.4

　　cnpm install vue-laoder@8.5.4 --save-dev

　　cnpm install vue-html-loader --save-dev     

　　 　　vue-html-loader  css-loader  vue-style-loader vue-hot-reload-api@1.3.2

            babel-loader bable-core babel-plugin-tranform-runtime  babel-preset-es2015 babel-runtime(为了es6，又不用脚手架，故手配)

ps:.vue文件没有颜色的插件下载https://github.com/vuejs/vue-syntax-highlight  clone完放到brower packages文件夹下就行，重启sublime

• vue-loader+vue-router

　　路由配合vue-loader使用：

　　1.下载vue-router模块  cnpm install vue-router@0.7.13

　　2.import VueRouter from 'vue-router'   //很显然这个是在入口引入main.js

　　3.Vue.use(VueRouter);     //vue-router基于vue使用，所以必须这样

　　4.配置路由

　　　　const router = new VueRouter();bo

　　　　router.map({

　　　　　　。。。路由规则

　　　　});

　　5.开启路由！！每次总忘     router.start(App,'一个容器，如#app');

　　注意：不用路由时  index.html   ->    <app></app>

        　　用路由        index.html   ->    <div id="app"></div>

        　　App.vue    ->   需要一个<div id="app"></div>根元素

• 路由嵌套

　　import Login from './components/login.vue'

　　subRoutes:{

　　　　'login':{

　　　　　　component:Login

　　　　}

　　}

　　其实路由嵌套跟单层路由一样的，只是多了引入模块的环节，加上subRoutes的运用，道理一样的。重要的是把握配置路由文件要单独抛出来便于维护也很解耦，针对性专一。

• 利用webpack的构建和上线

　　1.在package.json的script中加入：“build”:"webpack -p"

　　-p的意思是打包压缩。

　　2.然后就不需要用npm run dev了，只要npm run build就行了。

　　　　npm run bulid的本质就是运行了webpack -p;

　　3.然后在index.html中右键，open  in  browser就可以访问了

　　eg: https://github.com/itbainianmei/vue-loader-vue-router

　　由于配置过程中，全程带了--save-dev,所以每个人拿到项目运行时，只要npm install或者 cnpm install就行了。