初次開發微信公衆号遇到很多問題,可能是基礎不怎麼牢靠,最近幾天一直在看vue的東西,現在就來慢慢介紹vux和vue這個騷東西的用法:
細看文檔一步步來,
npm install vux --save 安裝vux這個ui架構,
vux2必須配合vux-loader使用, 請在build/webpack.base.conf.js裡參照如下代碼進行配置:
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原來的 module.exports 代碼指派給變量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
.vue檔案中調用元件
<template>
<div>
<group>
<cell title="title" value="value"></cell>
</group>
</div>
</template>
<script>
import { Group, Cell } from 'vux'
export default {
components: {
Group,
Cell
}
}
</script>
main.js中調用plugin(插件)
import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)
// 詳細使用請參考對應元件文檔
個人了解vux這個UI架構就是是按需要載入這個單個的ui元件。
接着:
安裝less-loader以正确編譯less源碼
npm install less less-loader --save-dev
安裝 yaml-loader 以正确進行語言檔案讀取
npm install yaml-loader --save-dev
添加viewport meta(index頁面)
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
添加Fastclick移除移動端點選延遲(main.js)
const FastClick = require('fastclick') /或者 import FastClick from 'fastclick'
FastClick.attach(document.body)
vux在webpack.base.conf.js配置如下:(然後cnpm install再cnpm run dev就能跑項目了,需要用的插件依賴什麼的需要什麼就自己install什麼。。。)
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
//vux的相關配置
const vuxLoader = require('vux-loader')
//以下為預設:
let webpackConfig = {//這裡需要更改下名字。。。把module.exports改為let webpackConfig,const webpackConfig = originalConfig 這行代碼可以不用!!
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'],
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', 'progress-bar', 'duplicate-style']
})