作用域插槽
在子模板中建立slot标签
在父亲的中调用子模板的标签中写入template标签 并加上属性 slot-scope="slot"
调用的话直接在{{slot.data}} 这样调用
模块化
Js原生模块打包
导出 //export
在导出前定义好 然后直接通过json形式全部导出
如果这样导出 那么用户将自定义 接收
export default {} //导出 import app from "./vue/app"; //接收
导入 //import
Webpack //!!!如果报错几乎都是版本 问题
安装 Vue2对应webpack3 //版本问题
npm install webpack@3.6.0 --save-dev
使用
通过js
Js模块互相引包 如果直接用那个js文件的话 那么htm页面将不认识这个引包
必须通过webpack函数使用
创建两个文件夹 src dist 分别为源js文件夹 webpack生成的文件夹
命令：webpack ./src/asd.js ./dist/bundle11.js
如果不想敲那么多命令行
可以在终端的当前目录下建立 webpack.config.js文件
配置文件中的代码
const path=require('path'); module.exports={ entry:"./src/asd.js", output:{ path:path.resolve(__dirname,"dist"), filename:"wangzhaoyang.js" } }
运行代码 直接命令行敲 webpack
packjson.json启动 可以用本地的webapck防止与总版本兼容
npm init //初始化一个 package.json的文件
然后咱下图中的数据修改
好处就是如果webpack版本不兼容的话可以定义内部的webpack来使用
npm run build //执行命令行
webpack loader模块 //一定注意版本问题
安装npm依赖
npm install style-loader@0.23.1 --save-dev
安装loader中合适的loader
npm install --save-dev css-loader@0.28.0 //安装css模块依赖
npm install less@3.9.0 --save-dev //安装less模块依赖
npm install less-loader@5.0.0 --save-dev //安装less-loader依赖 两个都得装下
npm install --save-dev url-loader@1.1.2 //安装url依赖
针对背景图关于css样式里面的url属性
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 //安装将es6转化为es5的依赖
配置一下得
{ test: /\.js$/, //exclude 排除因为不想将下面的文件转换为es5 //include 包括 exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['es2015'] //这里做一个修改 } } }
npm install vue@2.5.21 --save //安装Vue依赖
因为装的版本是简略版run所以直接运行的话会报错得修改下面是两种修改方式
方法一：在webpack.config.js文件里面加上这一条属性 原理就是improt Vue from “vue”的时候 他不去找默认的vue文件 而去找咱们那个完整版的文件
resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js' } },
方法二：在引用Vue的时候直接
import Vue from 'vue/dist/vue.js'引用
不再是 import Vue from 'vue'这样引用
⑥npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev //安装关于.vue文件的脚手架
!!!!!!!!!!vue-loader的版本要是不对的话会产生提示这样的插件plugin错误
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
vue-template-compiler 版本号 必须！！和vue的版本统一
安装完以后配置webpack.config.js文件
{ test: /\.vue$/, use: [ { loader: 'vue-loader', } ] },
使用vscode用户可以下载Vetur插件来快速创建vue模板
<template> //在这里放置模板 </template> <script> //引用js语句的话一定要在script中使用 export default { name:”” //这里放置除了template 的其余属性data啦啥的 } </script> <style> //这里放置需要设置的css样式代码 </style>
js文件引用vue文件
import app from "./vue/app1.vue";
vue文件也可以对vue文件进行引用
如果想引用的时候省略.vue
import app from "./vue/app1";
需要配置webpack.config.js文件里的extensions属性
resolve: { extensions:['.js','.css','.vue'],//可以让你省去写.js .css .vue 文件名 alias: { 'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js' 别名 可以让你正确的寻找文件 } },
配置package.json中的文件 //安装的时候npm 加上--save-dev 这个语句的话人家就默认配置
"devDependencies": { "all": "^0.0.0", "css-loader": "^0.28.0", "style-loader": "^0.23.1", "webpack": "^3.6.0" }
配置webpack.config.js文件
下面中的有个坑 use属性 里面的东西执行顺序是从右向左执行
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }
在要打包的js文件里面调用css
require("./css/aaa.css");
开始启动
添加版权的Plugin
⑦npm install --save-dev html-webpack-plugin@3.2.0//安装将html转化到dist目录下
需要配置webpack.config.js文件
const HtmlWebpackPlugin=require("html-webpack-plugin"); //然后给module.exports 里面配置属性 plugins:[ new webpack.BannerPlugin("最终版权归王朝阳所有"), new HtmlWebpackPlugin({}) ],
打包的文件的html文件默认是引用了这个打包后js文件的那个html
也可以自己配置 里面的属性 template那个属性就是要打包的文件
new HtmlWebpackPlugin({ template:"a.html" })
js压缩的Plugin
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
将自动把要压缩的js文件压缩
搭建本地服务器 //vscode 中有一个live sever插件挺好使
npm install --save-dev webpack-dev-server@2.9.1
webpack.config.js文件里面配置
运行服务器方法一
直接在命令行中敲出
node_modules\.bin\webpack-dev-server
再package.json文件夹中 script属性下 设置
"scripts": { "dev":"webpack-dev-server --open" },
其中 --open 的意思是运行服务器的时候直接打开
配置文件的分离
npm install webpack-merge@4.1.5 --save-dev
建立一个build文件夹 里面放置三个文件
base.config.js //公共配置文件
dev.config.js //测试文件
prod.config.js //生产文件
测试文件里面的代码格式为
const uglifyJsPlugin=require("uglifyjs-webpack-plugin"); const webpackMerge=require("webpack-merge"); const baseConfig=require('./base.config') module.exports=webpackMerge(baseConfig,{plugins:[ new uglifyJsPlugin(), ]})
使用：在原先的package.json 文件里面自己设置的build dev属性修改
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config ./build/prod.config.js", "dev": "webpack-dev-server --open --config ./build/dev.config.js" },
在公共的webpack.config.js文件中（自己定义了一个base.config.js 就是这个东西）修改他的出口
path
设置 要不就会在自己刚创建的build文件夹中打包自己写的代码
output:{ path:path.resolve(__dirname,"../dist"), //在这里修改 filename:"wangzhaoyang.js" },
Vue CLI
1.安装 npm install -g @vue/cli
2.查看版本 vue -V
3.初始化vue init webpack 项目名称 //Vue CLI2
vue create 项目名称 //Vue CLI3
如果装脚手架失败 试试下面这两个
vue ui
vue-router
使用直接初始化vue init webpack 项目名称里面选中vue-router //Vue CLI2
在项目router目录有一个index.js文件
//配置路由 import Vue from 'vue' import Router from 'vue-router' // 将要显示的vue文件引入到这里 import about from "../components/about.vue" import home from "../components/home.vue" //让Vue使用Router插件 Vue.use(Router) //配置路由和组件的关系 export default new Router({ routes: [ { path: '/about', component: about }, { path: '/home', component: home } ] }) ———————————————— 版权声明：本文为CSDN博主「_揽」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_59747594/article/details/127935617
使用路由 //将下面的东西放到要渲染的页面上面
<router-link to="/about">about</router-link> <router-view></router-view>
配置的一些小细节
修改路由映射
routes: [ { path: '/', redirect:"/ahome" //可以将将上面的路由映射到这里 },]
默认hash值 修改为htmlhistory路由
添加一条属性mode:”history”
export default new Router({ routes: [ ], mode:"history" //添加这一条 })
修改渲染的目标dom 默认a标签
加一条tag=”要渲染成的dom标签”
<router-link to="/home" tag="button">home</router-link>
不留下历史记录 直接添加一个replace属性
那么访问这个就不会留下浏览记录
<router-link to="/home" tag="button" replace>home</router-link>
如果匹配到路由以后会自动添加一个class
修改class名方法1：
<router-link to="/home" active-class="abc">home</router-link>
修改class名方法2：
export default new Router({ routes: [ ], mode:"history", linkActiveClass:"aac" //或者这样在这里修改 })
