标签：color star 实例化 rom modules 文件组 log 路由 思想
在页面引入vue-router.js文件，开始配置路由
<div id="box"> <ul><li> <a v-link="{path:‘/home‘}">主页</a> </li> //点击跳转路由 <li> <a v-link="{path:‘/news‘}">新闻</a></li> </ul> <div> <router-view></router-view> </div> //路由显示区域 </div>
<script> var App=Vue.extend(); //1. 准备一个根组件（总的组件） var Home=Vue.extend({ //2. 为Home News组件定义模版准备 template:‘<h3>我是主页</h3>‘ }); var News=Vue.extend({ template:‘<h3>我是新闻</h3>‘ }); var router=new VueRouter(); //3. 准备路由，实例化一个路由 //4. 关联 router.map({ //使用router.map将模版进行关联 ‘home‘:{ //设置跳转名称‘home component:Home //绑定到定义好的模版 }, ‘news‘:{ component:News } }); router.start(App,‘#box‘); //5. router.start启动路由，绑定总组件到指定元素 router.redirect({ ‘/‘ : ‘/home‘ }); //6. router.redirect默认跳转 </script>
路由的嵌套：在关联路由的模版内使用 subRoutes
<template id="home"> //父级路由的模版 <h3>我是主页</h3> <div> //内部嵌套路由 <a v-link="{path:‘/home/login‘}">登录</a> //注意子路由的路径 <a v-link="{path:‘/home/reg‘}">注册</a> </div> <div> <router-view></router-view> </div> </template>
router.map({ //4. 关联路由
‘home‘:{
component:Home,
subRoutes:{ //在模版内部使用subRoutes定义子路由模版
‘login‘:{
component:{
template:‘<strong>我是登录信息</strong>‘
}
},
‘reg‘:{
component:{
template:‘<strong>我是注册信息</strong>‘
}
}
}
},
‘news‘:{
component:News
}
});
路由链接后面带参数获取：$route.params
<a v-link="{path:‘/news/detail/001‘}">新闻001</a> <a v-link="{path:‘/news/detail/002‘}">新闻002</a> //跳转链接后面带参数
‘news‘:{ component:News, subRoutes:{ ‘/detail/:id‘:{ //在定义的路由跳转名称后面加：名称 component:Detail } } }
以下方法返回的都是一个JSON对象，需要过滤转化
{{$route.params | json}} //获取当前路由链接地址后的参数
{{$route.path}} // 获取当前路由链接的路径
{{$route.query | json}} //获取当前路由链接？后面的数据
Vue-loader的使用：
vue文件内容介绍: 放置的是vue组件代码
<template> html文本 </template>
<style> css文本 </style>
<script> js文本 （平时代码、ES6） </script>
Vue-loader简单的目录结构:
index.html 主页面
main.js 入口文件，为webpack打包准备
App.vue vue文件组件，官方推荐命名法，第一个字母大写
package.json 工程文件(放置项目依赖、名称、配置)
webpack.config.js webpack配置文件
ES6语法: 模块化开发思想
导出模块： export default {}
引入模块: import 自定义模块名 from 地址
npm init --yes 该指令可生成package.json文件
--save-dev : 将下载的文件写入配置文件中的"devDependencies"
--save： 将下载的文件写入配置文件中的"dependencies"
使用Vue-loader的准备工作：
1、下载webpack： 出现node_modules文件
npm install webpack --save-dev 不带服务器的版本
npm install webpack-dev-server --save-dev 带服务器的版本
在package.json中的“scripts”对象中，配置好运行打开监听端口指令，--port 8082为自定义端口，默认为8080端口
"scripts": { "dev": "webpack-dev-server --inline --hot --port 8082" },
在命令行打开文件目录，输入npm run dev
在浏览器打开http://localhost:8082/ 即可访问
2、下载vue-loader ： node_modules文件内出现vue-loader文件
vue-loader可以将App.vue等文件编译成正常文件
npm install vue-loader@8.5.4 --save-dev 使用8.5.4 版本
3、下载解析vue文件内部HTML、CSS、JS所需要的模块
vue-html-loader 解析HTML部分
css-loader、vue-style-loader 解析style部分
vue-hot-reload-api@1.3.2 解析JS部分，使用1.3.2 版本
cnpm install vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2 --save-dev 一次性下载所有loader
4、下载babel-loader 以及需要的各个babel插件
babel-loader 可以把ES6语法编译成ES5语法的模块
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev
npm install vue@1.0.28 --save
模块化开发，加入路由：配合vue-loader使用
npm install vue-router@0.7.13 --save-dev
2、在入口文件里引入vue-router并使用
import VueRouter from ‘vue-router‘
Vue.use(VueRouter);
3、在入口文件中配置路由
var router=new VueRouter(); router.map({ 路由规则 }) router.start(App,‘#app‘);
注意事项：
使用了路由后，原本index.html文件中的<app></app>改变
变成<div id="app"></div>，
App.vue文件中的模版需要一个 <div id="app"></div>作为父元素包裹
关于项目的打包上线：
在package.json文件文件增加"build":"webpack -p"
命令行执行 npm run build
关于vue-cli 脚手架：帮助你搭好基本的项目结构
提供了多种模版：
simple 最简单的模版，只具备基本的语法
webpack 集合多种功能，如Eslint 检查代码规范，单元测试
webpack-simple 没有代码检查
基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
如何验证安装ok? vue --version 教程使用2.4.0
2. 生成项目模板
vue init <模板名> 本地文件夹名称
例如：vue init simple#1.0 simple-test
vue init webpack#1.0 webpack-test
vue init webpack-simple #1.0 webpack-simple-test
端口号 config/index.js里面修改
3. 进入到生成目录里面 cd xxx
4. 按照依赖项 npm install
5. npm run dev
如何在脚手架里面使用less
1、安装需要使用到的less模块和less-loader模块
并在wenpack.config.js里面配置
命令行：npm i install less less-loader --save-dev
配置： { test: /\.less$/, loader: ‘less‘}
2、在<style></style>标签中加入 lang=”less”
lang=”less” 表示声明语言
scoped 表示局部的，里面的样式只有当前文件可以使用
如何在脚手架里面使用scss
安装node-sass ,sass-loader,vue-style-loader，css-loader
lang=“scss”
npm install vue-cli -g
vue init webpack-simple #1.0 webpack-simple-test
npm install vue-router --save
cd vue-test
npm install
npm run dev.
标签：color star 实例化 rom modules 文件组 log 路由 思想
原文地址：http://www.cnblogs.com/zhengweijie/p/6906046.html
