vue-cli
继续继续努力
冰冻三尺非一日之寒
展开
-
Vue-cli的介绍与安装
1.vue-cli介绍Vue-cli是Vue的脚手架工具,能够帮助我们搞定目录结构、本地调试、代码部署、热加载、单元测试等。2.安装# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖,走你$ cd my-project$ npm原创 2017-05-14 10:53:40 · 299 阅读 · 0 评论 -
Vuejs2.0 组件与组件之间的通信
一、开始第一个DEMO,其中一个功能需求--组件与组件之间作用域里,但又需要传递数据。例如:App.vue为父组件,有子组件A.vue、B.vue1.App的数据传递给A、B2.A、B的数据传递给App3.A、B数据相互传递一、思路解决以上需求的思路如下:1.App通过props传递数据给A、B2.A、B通过$dispatch调用App的Event并传递数据给App转载 2017-05-14 10:55:58 · 298 阅读 · 0 评论 -
Vue下拉框点击选中,点击其他区域消失
vue-cli中实现下拉框点击其他区域消失 排序 {{sort}}选中显示 export default { name: 'hello', data () { return { show: false activeName:'', sorts :{ "defa原创 2017-06-29 16:33:12 · 7749 阅读 · 3 评论 -
使用watch监听input值
vue禁止input输入非数字,以及可输入的最大值 {{num * 3}} var vm = new Vue({ el:'#app', data:{ num:1, oldNum:0 }, watch:{ num:{ handler:(val,oldVal)=>{原创 2017-07-22 12:04:31 · 2838 阅读 · 0 评论 -
VUE 关于理解$nextTick()的问题
Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM。this.$nextTick()官方介绍:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。DOM<div id="app"> <p ref="myWidth" v-if原创 2017-12-06 20:27:26 · 13644 阅读 · 0 评论 -
如何vue-cli2.x以及vue-cli3.x中怎么使用postcss
使用vue-cli脚手架新建了一个以webpack模版的项目,想在单组件的项目中使用postcss书写css。1、安装npm install postcss-cssnext postcss-import postcss-loader -S2、如果已经安装postcss(npm install postcss -S)有坑,需要一大堆loader配置,这时项目根目录会生成“.postcssr...原创 2018-03-22 15:27:24 · 9990 阅读 · 2 评论 -
Vue项目首屏优化--webpack
1、externals的使用externals,官方文档给出的解释,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在项目中通过CMD、AMD或者window/global全局的方式访问。例如:通过CDN将vue,vue-router,Element-UI从vendor.js中抽离出来,使用//修改 build/webpack.base.conf.jsmodu...原创 2018-03-31 16:49:50 · 734 阅读 · 0 评论 -
vue-cli3中process.env.BASE_URL配置、接口代理以及其他配置
vue-cli3的源码部分:@vue/cli-service/lib/util/resolveClientEnv.jsmodule.exports = function resolveClientEnv (options, raw) { const env = {} Object.keys(process.env).forEach(key => { if (pre...原创 2018-12-05 10:54:59 · 119506 阅读 · 1 评论 -
vue-cli3 配置 postcss-pxtorem
1.首先安装依赖 (已配置postcss)yarn add 或者 npm installpostcss-pxtorem2.更改package.json"postcss": { "plugins": { "autoprefixer": {}, "postcss-cssnext": {}, "postcss-pxtorem": { ...原创 2019-03-24 12:04:58 · 5044 阅读 · 1 评论