vue学习之旅
- 大纲：
- 属性
- 事件
- 循环
- 指令
- 交互
- 过滤器
- 模板
- 计算属性
- 自定义过滤器和指令
- 组件（父子组件之间的通讯）
- 路由和多层路由以及占位槽slot等其他
- 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的使用及安装:
- 工程文件简单的目录结构
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就行了。
