Vue+Webpack
Zyl_CN
这个作者很懒,什么都没留下…
展开
-
webpack导入vue
在项目中安装vue并使用npm i vue -s然后在main.jsimport Vue from 'vue';var vm=new Vue({ el:'#app', data: { msg:123, }})打包后发现会报错,因为vue在webpack中使用的是vue.common.js然不是完整的vue.js,所以如果想要使用实例化这种的vue方法需要...原创 2019-04-02 15:04:15 · 480 阅读 · 0 评论 -
vuex
vuex是用来保存组件之间的共享数据,如果组件之间有要共享的数据,可以直接挂载到vuex中,而不必通过props和emit来进行传值安装 npm i vuex -s在main.js引入并使用import vuex from 'vuex'vue.use(vuex);创建const store =new Vuex.Store( { state : { ...原创 2019-04-19 14:11:17 · 190 阅读 · 0 评论 -
编程式导航(网页的跳转)
js中使用 window.location.href="xxxx"来进行跳转在vue中,使用this. $router.push(''xxxx'')来进行跳转注意:this.$route.query....是用来获取url的信息,this.$router.push...是来跳转网页的...原创 2019-04-16 18:41:11 · 751 阅读 · 0 评论 -
图片缩略图插件(vue-preview)
npm i vue-preview -simport VuePreview from 'vue-preview'Vue.use(VuePreview)<div class="imgContent"> <vue-preview :slides="imgArr" @close="handleClose"></vue-preview><...原创 2019-04-16 15:47:59 · 1524 阅读 · 0 评论 -
vue-cli中使用swiper
npm i vue-awesome-swiper -s在main.js中import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper);在所需要的页面中import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } fr...原创 2019-04-09 18:29:48 · 579 阅读 · 0 评论 -
mint-ui使用
npm i mint-ui -s1、全局导入使用--main.js中import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)然后就可以直接使用css的封装组件了,如果要使用js的组件的话,需要按需加载需要的组件,官方文档都有2、按需加载导入使用npm install b...原创 2019-04-03 16:24:47 · 459 阅读 · 0 评论 -
vue时间过滤器(moment)
安装npm i moment -s引入import moment from 'moment';配置Vue.filter('dateFormat',function (dataStr,pattern='YYYY-MM-DD HH:mm:ss') { return moment(dataStr).format(pattern)})使用<span>...原创 2019-04-12 15:36:12 · 247 阅读 · 0 评论 -
axios的使用
安装npm i axios vue-axios -s引用import axios from 'axios'import vueAxios from 'vue-axios'Vue.use(vueAxios,axios)配置axios.defaults.baseURL = 'https://api.example.com'; //前缀名axios.defaults.h...原创 2019-04-12 15:31:02 · 440 阅读 · 0 评论 -
webpack+vue路由的配置与分离
因为要使用路由,所以先下载npm i vue-router -s然后在main.js中导入与使用它import VueRouter from 'vue-router'Vue.use(VueRouter);路由的分离,是新建一个js文件(router.js)然后在里面进行配置import VueRouter from 'vue-router' 配置路由要先引入路由imp...原创 2019-04-03 10:00:33 · 492 阅读 · 0 评论 -
导入和暴露用法
node中的导入为var 名称=require('模块的标识符')、暴露为module.exports和exportses6 中的导入为import、暴露为export default和exportexport default { name:'zs', age:55}export var ex1 = {name:'ex1',age:99}export var ex2 = {...原创 2019-04-02 17:58:28 · 712 阅读 · 0 评论 -
vue中的script/css配置
在.vue文件中,有3部分:在css中scoped表示作用域,加上表示只作用于此组件上; 如果想用less、scss等来编写,可以加 lang="scss" ...原创 2019-04-02 17:47:43 · 854 阅读 · 0 评论 -
webpack中vue组件的识别与应用
webpack打包无法处理.vue后缀的文件,所以需要先下载npm i vue-loader vue-template-compiler -d如果然后安装的vue-loader是15.x.x以上的需要配置webpack.config.jsconst VueloaderPlugin=require('vue-loader/lib/plugin')new VueloaderPlu...原创 2019-04-02 16:47:00 · 475 阅读 · 0 评论 -
scss/sass在vue的使用
在vue的css样式中,使用@import和@include可以导入和使用外部的scss/sass就是在.talk这个类中使用外层scss中定义好的mixin方法;scss的全局使用如果想要全局定义使用某个scss文件时,除了scss的2个依赖(sass-loader和node-sass)外,还需要现在(sass-resources-loader)这个依赖npmsass-r...原创 2019-05-20 14:09:33 · 309 阅读 · 0 评论