vux环境搭建准备工作

Vue中使用vux的配置，分为两种情况：

一、根据vux文档直接安装，无需手动配置

npm install vue-cli -g // 如果还没安装
vue init airyland/vux2 my-project // 创建名为 my-project 的模板
cd my-project // 进入项目
npm install --registry=https://registry.npm.taobao.org // 开始安装
npm run dev // 运行项目

二、想在已创建的Vue工程里引入vue组件

（1）. 在项目里安装vux

npm install vux --save

（2）. 安装vux-loader （这个vux文档似乎没介绍，当初没安装结果报了一堆错误）

npm install vux-loader --save-dev

（3）. 安装less-loader （这个是用以正确编译less源码，否则会出现 ' Cannot GET / '）

npm install less less-loader --save-dev

（4）. 安装yaml-loader (以正确进行语言文件读取, 我没安装似乎也没报错)

npm install yaml-loader --save-dev

（5）. 在build/webpack.base.conf.js 文件进行配置

const vuxLoader = require('vux-loader')

const webpackConfig = originalConfig

// 原来的 module.exports 代码赋值给变量 webpackConfig，

//即将原来的module.exports 改为 const webpackConfig
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

 

三、改造router

main.js中的router才起到作用，而src/router下的index.js文件写的路由配置压根就不起作用，那如何改造呢？

 1.main.js文件

import Vue from 'vue'

import FastClick from 'fastclick'

import VueRouter from 'vue-router'

import router from './router'

import App from './App'

import Home from './components/HelloFromVux'

// Vue.use(VueRouter)

// const routes = [{

　　// path: '/',

　　// component: Home

// }]

// const router = new VueRouter({

　　// routes

// })

FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

　　router,

　　render: h => h(App)

}).$mount('#app-box')

 

2.router目录下的index.js文件

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

const routes = [

{

　　path:'/',

　　name:'HelloWorld',

　　component:HelloWorld

}]

const router = new Router({

　　routes

})

export default router

// export default new Router({

// routes: [//{

　　// path:'/',

　　// name:'HelloWorld',

　　// component:HelloWorld

　　// } ]

// })

 

四、npm 

cnpm install stylus stylus-loader --save-dev

cnpm install axios --save

cnpm install lib-flexible --save

cnpm install vue-lazyload --save

 

五、引入方式

import 'babel-polyfill'

import 'lib-flexible/flexible'

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad,{

　　preLoad: 1.3,

　　error: require('@/common/images/error.png'),

　　loading: require('@/common/images/default.png'),

　　attempt: 1

})