本文共 6003 字，大约阅读时间需要 20 分钟。

强烈推荐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 
   
    ",  "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

组件引用

按需引入

   import { XInput, Group } from 'vux'export default {  data() { //选项 / 数据            return {                phone:15539383737        }    }  components: {    XInput，    Group  }}

转载地址：http://mzhbb.baihongyu.com/