如何在你的Vue项目配置vux
做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux。
其实项目里组件库可以结合起来使用,因为不管是vux,Mint-ui,Muse-ui等等各有各有的优势,今天就只分享下vue项目中如何配置vux。
1.项目里安装vux
npm install vux --save
2.安装vux-loader(vux2必须结合vux-loader使用,本文也只是介绍vux2的配置)
npm install vux-loader --save-dev
3.安装less-loader
npm install less less-loader --save-dev
安装完成记得在webpack.base.conf.js里做如下配置,在extensions里加入less resolve: {
extensions: ['.js', '.vue', '.json', 'less'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
} 4.安装yaml-loader
npm install yaml-loader --save-dev
最后一步在build/webpack.base.conf.js文件里将原来的module.exports的代码赋值给一个新的变量webpackConfig,整个文件如下: 'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vuxLoader = require('vux-loader')
const vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) {
return path.join(__dirname, '..', dir)
} const webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json', 'less'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
} module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
}) 我们不需要在main.js里引入,而是在我们需要用到组件库的组件里面通过 import { XHeader, Tabbar } from 'vux' export default {
components: {
XHeader,
Tabbar
// 需要什么import引入然后加入组件的components里就好了
}
} 转自:如何在你的Vue项目配置vux
http://blog.csdn.net/zhanglong_web/article/details/78699022
如何在你的Vue项目配置vux的更多相关文章
- vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境
目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...
- 基于Typescript的Vue项目配置国际化
基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...
- vue/cli3 配置vux
安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...
- vue项目配置及代理解决跨域
axios数据请求 1.下载模块:npm install axios 2.axios特点: 1.支持在浏览器当中发起XMLHttpRequest请求 2.支持Promise 3.自动转换json数据 ...
- vue项目配置Mock.js
扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...
- vue项目配置及项目初识
目录 Vue项目环境搭建 Vue项目创建 重构项目依赖 1.需要转移的文件 2.重构依赖 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main. ...
- vue项目配置多入口多出口【转载】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/localhost_1314/article ...
- vue项目配置 `webpack-obfuscator` 进行代码加密混淆
背景 公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段.字符编码转 ...
- vue项目配置vuex
在vue项目中各组件之间传值非常的好用,但是当组件数量多的时候,就会感觉到多个组件之间传值就会变的非常痛苦.因此就需要使用vuex来管理数据值,这样在任何页面不需要传值过来的情况下就可以拿到我们想要的 ...
随机推荐
- linux学习笔记 其他常用命令
cd + 回车 = cd ~ 进入当前用户主目录 查看指定进程信息 *ps -ef |grep 进程名 *ps -查看属于自己的进程 *ps -aux 查看所有的用户的执行进程 换成 ps - ...
- SpringBoot文件上传下载
项目中经常会有上传和下载的需求,这篇文章简述一下springboot项目中实现简单的上传和下载. 新建springboot项目,前台页面使用的thymeleaf模板,其余的没有特别的配置,pom代码如 ...
- 从香港机房引入google/bitbucket路由
首先说这种方法有一个局限性:只适用于非CDN网段的引入,比如Google自己足够大,所以用不到CDN,那在香港解析出来的就是Google在香港自己的AS number,因此不存在CDN干扰的问题.如果 ...
- 如何在debug vue-cli建立的项目
因为vue-cli使用了webpack,导致了一些页面报错了位置不精确的问题. 在网上找到了解决方案,在此分享. https://segmentfault.com/q/1010000008757714 ...
- 牛客国庆集训派对Day1.B.Attack on Titan(思路 最短路Dijkstra)
题目链接 \(Description\) 给定\(n,m,C\)及大小为\((n+1)(m+1)\)的矩阵\(c[i][j]\).平面上有\((n+1)(m+1)\)个点,从\((0,0)\)编号到\ ...
- 2018 EC-Final 部分题解 (A,J)
目录 The 2018 ICPC Asia-East Continent Final A.Exotic - Ancient City(思路 并查集) J.Philosophical - Balance ...
- JS垃圾收集机制
JS 具有自动垃圾回收机制,不需要像C++/C等语言去手动跟踪内存使用情况. 垃圾收集方式: 1.标记清除: 垃圾收集器在运行时给存储在内存中的所有变量都加上标记,然后,它会去掉环境中的变量,以及被环 ...
- js中call和apply的作用和用法
call和apply的用途是完全一样的.改变函数中this的指向: 为什么要改变this的指向呢?这个有什么用?有哪些场景呢? 首先this的指向总是在变的,this的指向是由函数执行时所在的环境决定 ...
- C#自动识别文件编码
以下代码源自:http://www.cnblogs.com/stulzq/p/6116627.html /// <summary> /// 用于取得一个文本文件的编码方式(Encoding ...
- hihocoder1051 补提交卡(贪心)
http://hihocoder.com/problemset/problem/1051 一开始dfs暴搜超时 这题关键在于理解到,肯定是补连续的几天.所以说写贪心之前要好好想想,怎么贪. //补题卡 ...