强烈推荐vux插件，非常好用的移动端vue组件
首先还是需要创建vue项目，然后再安装vux依赖
开始创建vue项目
VueJs操作命令
- 安装一个框架： vue init webpack-simple vue_test
- 安装各种模块：cnpm install
如使用路由和网络请求 还需安装vue-router和vue-resource，全局状态vuex
- 安装vue-router ：cnpm install vue-router --save
- 安装vue-resource: cnpm install vue-resource --save
- 安装vue-vuex cnpm install vue-vuex--save
- 启动框架： cnpm run dev
已经可以运行啦
注：
cnpm install模块名--save-dev(关于环境的，表现为npmrun dev 启动不了)
cnpm install模块名 --save(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错)-S是简写
由于webpack打包时无法识别css，得安装以下模块，让webpack可以解析css文件
cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev
安装vux插件(官网上注明直接用nmp安装，cnpm 可能更新不及时)
- 安装vux npm install vux --save
- 安装vux-loader npm install vux-loader --save-dev
完整安装配置表
{
"name": "xyspring",
"description": "spring xingyuan",
"version": "1.0.0",
"author": "aimee1608 <shuigongqian@sina.com>",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11",
"vue-resource": "^1.5.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"vux": "^2.8.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.4",
"less": "^2.7.3",
"less-loader": "^4.1.0",
"style-loader": "^0.20.3",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"vux-loader": "^1.2.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
webpack.config.js 配置
因为vux主要是组件居多，样式和组件的引用是基于vux-loader,需要设置vux-loader;
添加识别css less vux js的规则
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
{
test: /\.(png|jpg|gif|svg|woff|ttf|eot|woff2)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /vux.src.*?js$/,
loader: 'babel'
}
完整配置如下：
var path = require('path')
var webpack = require('webpack')
const vuxLoader = require('vux-loader')
let webpackConfig = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: 'dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
{
test: /\.(png|jpg|gif|svg|woff|ttf|eot|woff2)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /vux.src.*?js$/,
loader: 'babel'
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json','.less']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
// devtool: '#cheap-module-source-map'
}
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [{name:'vux-ui'},{name: 'duplicate-style'}]
})
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
入口文件
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import routes from './router/routes.js'//路由模块文件
Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(VueResource)
const router = new VueRouter({
routes
})
var vm = new Vue({
el: '#app',
router,
store
})
路由模块
const routes =[
{//首页
path:'/',
component: resolve => require(['../components/mainTem/Home.vue'],resolve),
meta:{auth:true,keepAlive: true },
name:'Home'
},//登录
{
path:'/Login',
component: resolve => require(['../components/mainTem/Login.vue'],resolve),
meta:{auth:true,keepAlive: false},
name:'Login'
}
...
]
export default routes
组件引用
按需引入
<template>
<div>
<group class="lo-phone info" >
<x-input type="number" placeholder="输入手机号码" v-model="phone" :min="11" :max="11"></x-input>
</group>
</div>
</template>
import { XInput, Group } from 'vux'
export default {
data() { //选项 / 数据
return {
phone:15539383737
}
}
components: {
XInput，
Group
}
}
网友评论