第6章:vue-router,vue-cli和单文件组件
四，vue-router路由
1.简介
使用Vue.js开发SPA（Single Page Application）单页面应用
根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用
参考官网：https://router.vuejs.org/zh/
下载
使用cnpm下载
cnpm install vue-router@2.7.0 -S
下载后的js文件在当前目录下
node_modules/vue-router/dist
2.基本用法
html
主页 新闻
JavaScripts
完整代码如下day03/09.html
注意：引入vue.js需要在vue-router.js之前，否则控制台报错，原因不明
Unknown custom element:
路由基本用法
主页
新闻
页面显示，点击主页显示我是主页，新闻显示我是新闻
注意到点击链接会自动加#,如果不想看到这个#修改路由实例模式mode默认为hash修改为history
const router=new VueRouter({
// routes //简写相当于routes:routes
routes,
mode:'history'
});
页面显示
点击主页或者新闻也是有默认样式的，可以通过控制台查看到
修改样式，在
标签内增加以下代码页面显示
如果觉得这个样式名称太复杂也可以修改样式名
// 3.创建路由实例
const router=new VueRouter({
// routes //简写相当于routes:routes
routes,
// mode:'history'
linkActiveClass:'active' //更新活动链接的class类名
});
同时样式定义的时候也修改对应的名称
默认打开页面是不显示主页或者新闻的需要点击才显示，可以通过路由重定向，例如打开首页显示Home或者在没有找到路由的情况下跳转至Home
修改配置路由代码
// 2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',redirect:'/home'} //重定向
]
页面显示，默认显示Home，如果随意写一个没有的路由也会跳到Home
3.路由嵌套和参数的传递
路由嵌套：路由对应的链接下还有链接
把上面设置的路由新闻处改成用户，用户下面又有两个链接分别为用户登录和用户注册
day03/10.html
路由嵌套和参数的传递
主页
用户
用户信息
用户登录 用户注册
解析：在设置路由下新加关键字children对应嵌套的路由，写法是一致的
页面显示
上面写法是把标签
用户登录
用户注册
传递参数的两种形式
a.查询字符串：login?name=tom&pwd=123
{{$route.query}}
b.rest风格url：regist/alice/456
{{$route.params}}
传递参数获取示例，修改代码，演示两种传递参数及如何获取传递的参数
路由嵌套和参数的传递
主页
用户
用户信息
用户登录
用户注册
解析
注意：使用方式1直接传递即可，使用方式2为了不让浏览器认为传递的参数是路由需要定义，传递参数的方式，如下
页面显示
4.路由实例的方法
router.push()添加路由，功能上与
router.replace()替换路由，不产生历史记录
示例 day03/10.html
路由嵌套和参数的传递
主页
用户
用户信息
用户登录
用户注册
解析
增加两个按钮分别调用添加路由和替换路由的方法
方法如下，分别把路由指向home和user
页面显示
两者的区别在于替换路由是没有历史记录的即替换路由的上一页
5.路由结合动画
利用之前学的animate.css可以给路由结合动画，只需要给
day03/10.html
路由嵌套和参数的传递
主页
用户
用户信息
用户登录
用户注册
解析
添加动态进入出去动画
五，单文件组件
1. .vue文件
.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html，css，js
.vue文件由三部分组成
浏览器本身并不认识.vue结尾的文件，所以必须对.vue文件加载和解析，此时需要vue-loader 类似的loader还有许多，如：html-loader ，css-loader，style-loader,babel-loader等 需要注意的是vue-loader是基于webpack的 webpack是一个前端资源模块化加载器和打包工具，它能够把各种资源都作为模块来使用和处理 实际上，webpack是通过不同的loader将这些资源加载后进行打包，然后输出打包后的文件 简单来说，webpack就是一个模块加载器，所有的资源都可以作为模块来加载，最后打包输出。 webpack官网：https://webpack.github.io/ webpack版本：v1.x v2.x webpack有一个核心配置文件：webpack.config.js，必须放在项目的根目录下 webpack-demo 其他文件手动创建，-package.json可以通过目录创建初始文件 每个部分都有一个简单的内容 -S为生产依赖，-D为开发依赖 注意：复制粘贴安装可能会出现字符编码问题无法安装，可以手动输入安装，安装后会更新package.json文件 以下代码初始化package.json文件 运行完毕以后package.json文件 修改了默认的scripts语句，下面语句的意思是环境dev启动本机的8800端口 允许所有主机访问，注意需要--host 0.0.0.0否则只能是本机访问 如果安装失败可以使用以下方法重新安装 main.js 解析 会从当前目录node_modules 查找模块 webpack.config.js .babelrc 实际就相当于执行以下命令 启动8800端口 页面访问 修改App.vue可以实现热加载，例如修改以下内容 不需要重启，页面显示 修改使点击tom修改name属性 页面显示 开发组件展示一个用户的信息 页面显示 vue-cli是一个vue脚手架，可以快速搭建项目结构 vue-cli本身集成了多种项目模板： 全局安装 查看版本 列出可用的模板 在windows下自动打开浏览器 生产中将项目打包 ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等，要求比较严格 eslint规则官网：https://eslint.org/ 访问首页是一样的 初始化 在新建的day04运行 安装vue-router，生产依赖 引用vue-router src/main.js 修改App.vue 运行 页面显示 继续编辑App.vue增加主页和新闻链接 在目录src下新建文件夹components新增Home.vue和News.vue Home.vue News.vue 在src下新增路由配置文件 router.config.js 在main.js引入注入路由 启动项目 页面显示 打印路由信息以及监视路由的变化，在App.vue增加以下代码 打印路由对象以及监视路由如果发生了变化则打印新路由信息 页面显示 安装 使用axios的两种方式 方式1:在每个组件中引入axios 方式2:在入口文件main.js全局引入并添加到Vue的原型中 方式1示例 App.vue 页面显示 如果需要在Home组件中引用则需要在Home.vue引入这样使用不方便 使用方式2示例 修改入口文件main.js 需要使用axios的地方直接使用this.$http使用，修改App.vue 效果是一样的 src/compoents自定义组件 MyButton.vue 在App.vue引入组件并绑定事件send 解析 注意自定义需要需要加修饰符native监听组件根元素的原生事件，否则不生效 点击按钮调用send方法，和上面例子效果是一样的
2.vue-loader
3.webpack
4.示例，步骤
4.1 创建项目，目录结构如下：
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件
cnpm init --yes
4.2编写App.vue
welcome to itany
4.3安装相关模块
cnpm install vue -S
cnpm init --yes
cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler webpack-cli
cnpm init --yes
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --hot --port 8800 --host 0.0.0.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.3.4"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.4",
"webpack": "^3.0.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^2.5.0"
}
}
"dev": "webpack-dev-server --hot --port 8800 --host 0.0.0.0"
rm -rf node_modules
rm -rf package-lock.json
npm cache clear --force
npm install
4.5编写main.js
/**
* 使用ES6语法引入模板
*/
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
render:function(h){ //使用render函数渲染组件
return h(App);
}
});
import Vue from 'vue'
4.5 编写webpack.config.js
module.exports={
//配置入口文件
entry:'./main.js',
//配置入口文件输出位置
output:{
path:__dirname, //项目根路径
filename:'build.js'
},
//配置模块加载器
module:{
rules:[
{
test:/\.vue$/, //所有以.vue结尾的文件都由vue-loader加载
loader:'vue-loader'
},
{
test:/\.js$/, //所有以.js结尾的文件都由babel-loader加载，除了node_modules以外
loader:'babel-loader',
exclude:/node_modules/
}
]
}
}
4.6 编写.babelrc
{
"presets":[
["env",{"module":false}]
]
}
~
4.7 编写package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --hot --port 8800 --host 0.0.0.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.3.4"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.4",
"webpack": "^3.0.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^2.5.0"
}
}
4.8 运行测试
cnpm run dev
webpack-dev-server --hot --port 8800 --host 0.0.0.0
welcome
{{name}}
cat components/User.vue
用户列表
六，vue-cli脚手架
1.简介
simple 很少使用简单
webpack 包含ESLint代码规范的检查unit单元测试
webpack-simple 没有代码规范检查和单元测试
browserify 使用的也比较多
browserify--simple
2.示例
2.1 安装vue-cli，配置vue命令环境
cnpm install vue-cli -g
D:\vue.js\code\day03\webpack-demo>vue --version
2.9.6
2.2 初始化项目，生成项目模板
语法：vue init 模板名 项目名
D:\vue.js\code\day03>vue init webpack-simple vue-cli-demo
2.3 进入生成的项目目录，安装模块包
cd vue-cli-demo
cnpm install
cnpm run dev
cnpm run build // 将项目打包输出dist目录，项目上线的话要讲dist目录拷贝到服务器上
3. 使用webpack模板
vue init webpack vue--cli--demo2
cnpm install
cnpm run dev
cnpm run build
模块化开发
D:\vue.js\code\day04>vue init webpack-simple vue-cli-demo
1.vue-router模块化
cnpm install vue-router -S
2.编辑main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
// 使用vue-router
Vue.use(VueRouter);
new Vue({
el: '#app',
render: h => h(App)
})
cd vue-cli-demo
cnpm install
cnpm run dev
这是主页
这是新闻
import Home from './components/Home.vue'
import News from './components/News.vue'
export default{
routes:[
{
path:'/home',
component:Home
},
{
path:'/news',
component:News
},
]
}
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js'
// 使用vue-router
Vue.use(VueRouter);
// 创建路由实例
const router=new VueRouter(routerConfig);
new Vue({
el: '#app',
render: h => h(App),
// 注入路由
router
})
cnpm run dev
mounted(){
console.log(this.$route)
},
watch:{
$route:function(newValue,oldValue) {
console.log('路由发送变化，跳转到：'+newValue.path)
}
}
2. axios模块化
cnpm install axios -S
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js'
import axios from 'axios'
// 使用vue-router
Vue.use(VueRouter);
// 创建路由实例
const router=new VueRouter(routerConfig);
// 加入Vue原型，其他组件可以直接引用
Vue.prototype.$http=axios
new Vue({
el: '#app',
render: h => h(App),
// 注入路由
router
})
3.为自定义组件添加事件