Vue学习(7)-plugin、Vue-Cli、箭头函数、vue-router准备
一、vue的使用方法
创建vue时，当template和el同时存在时，会将template中的东西替换el中的东西。
要对.vue文件进行封装处理就需要安装vue-loader和vue-template-compiler.
npm install vue-loader vue-template-compiler --save-dev
因为脚手架还没学到，现在这个形式好像是很接近脚手架的了。
-
App.vue
//模版样式//js代码 //css样式{{message}}
-
main.js
import Vue from "vue"; // import App from "./vue/app"; import App from "./vue/App"; // require("./css/back.css") commentJs的方式 import "./css/back.css"; new Vue({ el: "#app", template: ``, //之后替换app中的东西 components: { App } }) -
Index.html
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> div> <script src="./dist/bundle.js">script> body> html>
二、plugin
认识plugin
- plugin是插件的意思，通常用于对某个现有框架进行扩展。webpack中的插件就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等。
- loader和plugin的区别：
- loader主要用于转换某些类型的模块，是一个转换器。
- plugin是插件，对webpack本身进行扩展，是个扩展器。
- 使用过程：
- 通过npm安装需要使用的plugins（内置过的不用再安）
- 在webpack.config.js中的plugins中配置插件。
添加版权的plugin
在webpack.config.js中添加
const path = require('path');
const webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.BannerPlugin('最终版权归大家所有')
]
}
即可在bundle.js开头添加声明。
不过应该不常用吧
打包html的plugin
因为发布时是发布dist里的文件，但是dist里没有index.html，因此需要将html也打包进去。
-
安装HtmlWebpackPlugin插件：
npm install html-webpack-plugin --save-dev -
要使用时在webpack.config.js文件中进行修改
const HtmlWebpackPlugin = require('html-webpack-plugin'); ... plugins: [ new HtmlWebpackPlugin({ template: 'index.html' //打包的模版 }) ] -
这时就会在dist文件中生成一个index.html
我在使用的时候出了点问题，安装htmlwebpackplugin安不上。可以这样解决：
- 清缓存：
npm cache clean --force- 重新安装：
npm install html-webpack-plugin --save-dev
搭建本地服务器
便于加快开发进度，在浏览器中刷新自动更新，就是热加载功能。
-
安装
npm install --save-dev webpack-dev-server@2.9.1 //因为和之前安的vue2.x版本相对应 -
devserver作为webpack的一个选项，有以下属性可以设置：
- contentBase：为哪一个文件夹提供本地服务，默认根目录，在这要填./dist
- port：端口号(默认8080)
- inline：页面实时刷新
- historyApiFallback：在SPA页面中，依赖HTML5的history模式。
-
将webpack.config.js中添加：
devServer: { contentBase: './dist', inline: true } -
同时为了在方便使用，在package.json中添加
"scripts": { ... "dev": "webpack-dev-server --open" },
三、Vue-CLI
runtime-compiler和runtime-only的区别
-
runtime-compiler：template -> ast(抽象语法树) -> render -> vitual dom -> UI
new Vue({ el: '#app', template: '', components: {App} }) -
runtime-only：render -> vitual Dom -> UI
性能高，代码量少
new Vue({ el: '#app', render: h => h(App), //render: function (h) { // return h(App) //} })
Vue-cli3的创建
-
输入
vue create projectname -
.browserslistrc =>浏览器相关支持情况 .babel.config.js =>ES语法转换
也可以使用vue ui来网页创建和管理
四、箭头函数
//1、function
const aaa = function () {
}
//2、对象字面量中定义函数
const obj = {
bbb() {
}
}
//3、ES6中的箭头函数
const ccc = (参数列表) => {
}
//若一个参数时小括号可以省略
//返回值若只有一行时可以直接写
const ddd = (num1, num2) => num1 * num2
//箭头函数的this是一层一层往外找的
五、vue-router准备
页面url更新但页面不重新加载
//将url压入栈结构
location.hash='url地址'
history.pushState({},'','url地址')
history.back()
history.forward()
//等同
history.go(前进或后退的地址数：例如-1,1)
安装与配置
router/index.js
//相关配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
//1、安装插件
Vue.use(VueRouter)
//2、创建VueRouter对象
const routes = [
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
//配置路由和组件间的应用关系
routes
})
//3、将router对象传入vue实例中
export default router
//4、在main.js中进行挂载
new Vue({
router,
render: h => h(App)
}).$mount('#app')
映射配置和展现
//index.js
import About from '../components/About.vue'
const routes = [
{
//点开默认显示的组件
path: '/',
name: 'Home',
component: Home
},
{
path: '/',
name: 'Home',
//点开默认显示的组件，同时地址栏显示
redirect: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
//占位
或者想自己定义函数来跳转
动态路由
//index.js
{
//当之后那个组件要获取时就是获取：后面的值
path: '/user/:aaa',
name: 'user',
component: user
}
user
- 若要获取例如用户名或者商品id，对组件进行一定修改
{{aaa}}
//或是这样直接获取
{{$route.params.aaa}}
路由懒加载
const Home = () => import('../components/Home')
const routes = [
{
path: '/',
name: 'Home',
component: Home
// 或是直接component: () => import('../components/Home')
},
路由的嵌套使用
-
创建子组件
-
在父组件中定义位置
<div> <h1>Homeh1> <router-link to="/news">newsrouter-link> <router-view>router-view> div> -
在路由中定义
const HomeNews = () => import('../components/HomeNews') const routes = [ { path: '/', name: 'Home', component: Home, children: [ { //若要让其默认显示news子组件时的默认路径 path: '', redirect: 'news' }, { path: 'news', component: HomeNews, } ] }, ]
主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1