搭建配置vux项目

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