Vue获取组件的一些方法this.$refs.xxx给标签绑定ref属性，获取的是当前DOM对象给组件绑定ref属性，获取的是组件实例对象this.$parent获取当前组件的父组件,为一个对象this.$root获取当前组件的根组件,为一个对象this.$children获取当前组件的子组件,为一个数组vue-cli(vue脚手架)的使用1.安装npm install -g @vue/cli //必须先安装了node.js -g表示全局环境 vue -V // 可查看当前vue-cli的版本 2.创建项目Vue CLI >= 3 和旧版使用...
1.跨域config/index.js 主配置文件中 dev 属性下 proxyTable 配置代理信息：proxyTable: {‘/api‘: { // 匹配所有以 ‘/api‘开头的请求路径target: ‘http://localhost:4000‘, // 代理目标的基础路径 //表示允许跨域请求 4000端口下的数据changeOrigin: true, // 支持跨域pathRewrite: { // 重写路径: 去掉路径中开头的‘/api‘‘^/api‘: ‘‘}}}, //代理设置 原文：https://www.cnblogs.com/Hijacku/p/14813011.html
最近在做vue项目时用到了Element，发现这玩意儿用起来很舒服，很新颖，上手也很快，而且效果足够酷炫。但是后面发现一个很大的问题，那就是Element的样式有限，这极大地限制了项目的应用广度，所以我们有必要对Element内部的CSS进行一定的覆盖，来改变其样式。在修改Element样式时，遇到了一些问题，这里简单做一些记录，便于以后查阅。 我在用el-switch做开关切换时，使用默认样式：代码如下：效果： 现在我想把蓝色字体改为...
最近在学习vue框架，练习了一些例子之后，想着搭建一个vue项目，了解到官方有提供一个vue-cli工具来搭建项目脚手架，尝试了一下，写下博客来记录一下。一、工具环境1、node.js 6.10.0，目前node.js最新版本是8.7.0，可以到官网下载最新版本安装。链接：http://nodejs.cn/download/2、编辑器，Hbuilder 8.8.43、windows 8.1二、创建项目1、安装node.js，默认安装在"C:\Program Files\nodejs"，随node.js安装的还有包管理工具npm（关...
1.当前项目配置npm install vue-awesome-swiper --save2，在main.js中加入require(‘swiper/dist/css/swiper.css‘);import VueAwesomeSwiper from ‘vue-awesome-swiper‘Vue.use(VueAwesomeSwiper);3.当前页面引入 //弹出框的轮播swiperOptionM: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/ // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化...
npm i element-ui -S npm i axios -S npm i qs -Simport Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import Axios from 'axios' import Qs from 'qs'Vue.config.productionTip = false Vue.prototype.$axios = Axios Vue.prototype.$qs = QsVue.use(ElementUI)new Vue({router,render: h => h(App) }).$mount(...
1.关闭烦人的eslint 语法检测，在 config 文件夹下 设置：// Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: false, //设置为false 2.引入scss样式文件，在需要引入的组件代码最后加上：<!-- Add "scoped" attribute to limit CSS to this component only --><style lang=‘scss‘ scoped>@import ‘../assets/...
我们在用vue-cli打包的时候，往往会出现包比较大的情况，webpack4已经帮我们进行了分包的处理，那我们也可以再进行gzip压缩打包，减小包的体积1.需要用到的插件：npm i -D compression-webpack-plugint特别注意，有的版本会出现”TypeError: Cannot read property ‘tapPromise‘ of undefined“这样的错误，建议安装5.0.0的版本2.修改vue.config.jsconst CompressionPlugin = require("compression-webpack-plugin"); module.expo...
vue-cli 3.x 安装：npm install -g @vue/clivue-cli 3.x 常用命令vue-cli 3.x 常用命令命令含义vue --help原文：https://www.cnblogs.com/cag2050/p/9198428.html
0901自我总结Vue-CLI项目vuex仓库一.概念vuex仓库是vue全局的数据仓库，好比一个单例，在任何组件中通过this.$store来共享这个仓库中的数据，完成跨组件间的信息交互。vuex仓库中的数据，会在浏览器刷新后重置二.使用store.jsimport Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex);export default new Vuex.Store({state: {// 设置任何组件都能访问的共享数据course_page: '' },mutations: {// 通过外界的新值来修改仓库中...
1.1runtime-compiler 和 runtime-only 的区别Runtime + Compiler:recommended for most users运行时+编译器:推荐给大多数用户编译过程 template-》ast-》render-》vdom-》真实DOMnew Vue({el: ‘#app‘,components: { App },template: ‘<App/>‘ }) Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere仅限运行时:大约...
工程结构 启动工程npm run devTodoList.vue<!--模板--><template><div><div><input class="item" v-model="inputValue"/><button @click="submit">提交</button><ul><todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="mydelete"></todo-item></ul></div></div></template><script> import TodoItem from ‘./components/TodoItem‘// 此处用来写逻辑,必须空出一行去写export defaul...
在vue-cli中构建的项目是可以使用less的，但是查看package.json可以发现，并没有less相关的插件，所以我们需要自行安装。第一步：安装npm install less less-loader --save-dev即通过npm安装less和less-loader，并记录到devDependencies中，因为这是我们在开发中使用的而非在生产中使用，所以就不将之记录在 dependencies 中。 第二步：在配置文件中配置 实际上如果我们通过vue-cli来构建项目，这一步是可以省略的。 在webpack.d...
从三个插件开始1、CommonsChunkPlugincommonsChunkPlugin 是webpack中的代码提取插件，可以分析代码中的引用关系然后根据所需的配置进行代码的提取到指定的文件中，常用的用法可以归为四类：（1）、提取node_modules中的模块到一个文件中；（2）、提取 webpack 的runtime代码到指定文件中；（3）、提取入口文件所引用的公共模块到指定文件中；（4）、提取异步加载文件中的公共模块到指定文件中。下面就具体说明以上四种用法。1.1 提...
vue create vuedemo 你会被提示选取一个preset。你可以选默认的包含了基本的Babel+ESLint设置的preset，也可以选手动选择特性来选取需要的特性。Babel : 将ES6编译成ES5 TypeScript: javascript类型的超集 Progressive Web App (PWA) Support: 支持渐进式的网页应用程序 Router:vue-router Vuex: 状态管理 CSS Pre-processors: CSS预处理 Linter / Formatter: 开发规范 Unit Testing: 单元测试 E2E Testing: 端到端测试ESLint + St...