2019年04月_Zyl_CN

原创 vue-router路由

路由的按需加载{ path: '/home', name:'home', component: resolve => require(['@/components/home'], resolve),},添加name后，可以在路由出使用name跳转<router-link :to="{name:'home' , query:{id:'999'}}">&lt...

2019-04-24 10:38:58 157

原创 vue总结

1.vue的初始化let vm = new Vue({ el: '#app', //指定操作的dom data: { //定义属性 msg: 1231, msg2: '' }, methods: { //定义方法 show() { ...

2019-04-23 19:06:34 316

原创 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

原创编程式导航（网页的跳转）

js中使用 window.location.href="xxxx"来进行跳转在vue中，使用this. $router.push(''xxxx'')来进行跳转注意：this.$route.query....是用来获取url的信息，this.$router.push...是来跳转网页的...

2019-04-16 18:41:11 751

原创图片缩略图插件(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>&lt...

2019-04-16 15:47:59 1524

原创 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&gt...

2019-04-12 15:36:12 247

原创 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 439

原创 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

原创纯c3实现动态省略号

2019-04-04 10:26:24 424

原创 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 458

原创 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 491

原创导入和暴露用法

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

原创 vue中的script/css配置

在.vue文件中，有3部分：在css中scoped表示作用域，加上表示只作用于此组件上；如果想用less、scss等来编写，可以加 lang="scss" ...

2019-04-02 17:47:43 854

原创 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 474

原创 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

原创 webpack的js转化工具babel配置

在js中写一些高级的es6的语法，进行打包处理会报错，因为会不识别，所以需要安装转化工具-babel//安装babel的转化工具,这里的babel-loader要安装版本7，高版本8，则需要更改其他的安装项npm i babel-core babel-loader@7 babel-plugin-transform-runtime -d//安装语法字典npm i babel-preset...

2019-04-02 11:28:43 277

原创 webpack打包处理字体文件

//如果在node_modules中找包的话，可以直接这样写import 'bootstrap/dist/css/bootstrap.css'然后在webpack.config.js中进行配置{test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}...

2019-04-01 17:31:39 2936

原创 webpack打包处理img

一般情况下，webpack无法处理css中的url地址（背景图片、字体等），所以需要使用插件来进行处理npm i url-loader -dnpm i file-loader -d //基于url-loader的依赖然后在webpack.config.js进行配置修改 {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?...

2019-04-01 11:31:38 790

Zyl_CN的博客