vue的一些笔记(一)
vue 2的项目结构
vue cli3 比vue cli2 项目结构简单了很多,没有了build
安装cli3
不指定版本会安装最新的版本
npm install -g @vue/[email protected]
创建
vue create project name
启动方式不同于vue cli2,在package.json中可以查看
vue cli3的启动方式 npm run serve
建立配置文件,用来配置webpack和一些全局的东西
vue.config.js
常用配置选项
// vue.config.js
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
module.exports = {
// 项目部署的基本路径,默认假设你的应用将会部署在域名的根部,比如,https://www.vue-cli.com/
// 如果你的应用是部署在一个子路径下,那么你需要在这里指定子路径,比如,
// 如果你部署在 https://www.my-vue.com/my-app/; 那么将这个值改为 “/my-app/”
publicPath: "/",
// 将构建好的文件输出到哪里 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
// 注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
outputDir: "dist",
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: "static",
// 是否在开发环境下通过eslint-loader在每次保存时lint代码。这个值会在@vue/cli-plugin-eslint 被安装之后生效。
// 设置为 true 时, eslint-loader 会将 lint 错误输出为编译警告。默认情况下,
// 警告仅仅会被输出到命令行,且不会使得编译失败。
// 如果你希望让 lint 错误在开发时直接显示在浏览器中,你可以使用 lintOnSave: 'error'。
// 这会强制 eslint-loader 将 lint 错误输出为编译错误,同时也意味着 lint 错误将会导致编译失败。
lintOnSave: true,
// 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用
// template 选项了,但是这会让你的应用额外增加 10kb 左右。
runtimeCompiler: false,
// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式
// 转译一个依赖,可以在这个选项中列出来。
transpileDependencies: [],
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
productionSourceMap: true,
// 向 CSS 相关的 loader 传递选项
css: {
/*为预处理器 loader 传递自定义选项*/
loaderOptions: {
sass: {
prependData: `@import "@/assets/scss/_variable.scss";`,// 预设全局css变量
},
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
},
},
// 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的
// webpack 配置进行更细粒度的修改。
chainWebpack: config => {
// 添加别名
config.resolve.alias
.set("@", resolve("src"))
.set("assets", resolve("src/assets"))
.set("components", resolve("src/components"))
.set("utils", resolve("src/utils"))
.set("api", resolve("src/api"));
},
// 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于
//一个内核时自动启用,仅作用于生产构建。
parallel: require("os").cpus().length > 1,
// 向 PWA 插件传递选项。
// https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// 所有 webpack-dev-server 的选项都支持。
// 注意:有些值像 host、port 和 https 可能会被命令行参数覆写。
// 有些值像 publicPath 和 historyApiFallback 不应该被修改,因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
// 代理配置
devServer: {
host: "0.0.0.0",
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: true //配置自动启动浏览器 open: 'Google Chrome'-默认启动谷歌
// proxy: 'http://localhost:9000' // 配置跨域处理,只有一个代理
// 配置多个代理
// proxy: {
// "/api": {
// target: "https://way.jd.com", //目标主机
// ws: true, //代理的WebSockets
// changeOrigin: true, //需要虚拟主机站点
// pathRewrite: {
// "^/api": ""
// }
// }
// }
},
// 第三方插件选项
// 这是一个不进行任何 schema 验证的对象,因此它可以用来传递任何第三方插件选项。
pluginOptions: {}
};
vue组件传值的常用方式
父子组件传值
1.prop/$emit
2.$parent/$children
3.$ref
父组件给子组件传值,一般通过给子组件绑定属性
tip:这里传的是字符串,所以msg前面没有使用冒号
<Mchild msg="from Parent msg"></Mchild>
在子组件里接收
export default {
//接收父组件传过来的字符串
props: {
msg: {
type: String,//类型
default:'' //默认给个空值
},
},
}
子组件里插值表达式展示传过来的值
<h5>{{msg}}</h5>
子组件给父组件传值一般通过事件绑定
在子组件中绑定按钮事件
<button @click="passMsg">触发按钮!</button>
子组件中添加方法passMsg
methods: {
passMsg() {
//传递一个自定义事件,第一个参数是自定义参数的名字,第二个参数表示data
this.$emit('showMsg','i am from child')
}
}
父组件中接收
data() {
return {
msg: ''
}
},
父组件中添加方法
methods: {
//这里val就可以接收到传过来的值
showMsg(val) {
this.msg=val
}
},
在页面中取值
<h3>{{msg}}</h3>
非父子组件
「事件总线」的方式
在src下创建一个目录util,在目录下新建一个文件
//建立一个公共的js文件,专门用来传递消息
//bus.js
import Vue from 'vue'
export default new Vue;
在App.vue中引入
import bus from './util/bus'
在Child.vue中引入
import bus from '../util/bus'
在App.vue
<button @click="passMsg">传值</button>
传值
methods: {
passMsg() {
bus.$emit('msg','i am from app')
}
}
监听
mounted () {
bus.$on('msg',(val)=>{
this.childMsg=val
})
}
查看
<h6>{{childMsg}}</h6>
跳转路由
1.router-link
2.函数式跳转
export default {
methods: {
passMsg() {
bus.$emit('msg','i am from app')
},
toHome(){
// this.$router.push({path:'/home',query:{name:'jack'}})
this.$router.push({name:'/home',params:{id:'3'}})
}
}
动态路由
比如有一个商品的详情页,要通过id的不同来展示不同的详情页
export default new Router({
routes:[
{
//表示要传入id
path:'/home/:id',
//路由的懒加载
component:()=>import('./src/views/Home.vue')
}
]
})
嵌套路由
export default new Router({
routes:[
{
path:'/home/:id',
//路由的懒加载
component:()=>import('./src/views/Home.vue'),
children:[{
path:'/child',
component:()=>import('./src/views/child.vue')
}]
}
]
})
导航守卫
vuex(状态管理模式)
假如我们有很多组件,这些组件都依赖一些数据,有些公用的数据,如果我们用组件间的传递,那么这样操作起来就会十分的麻烦,所以有了vuex,相当一个仓库,用来存放公共数据
侦听器watch
普通监视,基本的数据类型可以使用watch直接监听
深度监视,复杂的数据类型要深度监视
computed计算属性
computed默认只有getter方法
计算属性最大的优点就是产生缓存,如果数据没有变化直接从缓存中取
过滤器filters
1.局部过滤器
2.全局过滤器