用vue的UI组件库搭建项目

1.使用vant(一款vue的UI组件库)

cnpm i -g @vue/cli-init						// 安装脚手架

vue init webpack new_wechat					// 新建一个叫new_wechat的项目

npm install vant -S							// 安装vant

然后在main.js（入口文件）里面引入所有组件（我习惯引入所有组件，也可以按需引入）

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

1.1或者试用vux(一款vue的UI组件库)

npm install vux --save

安装vux-loader：

npm install vux-loader --save

安装了vux后还要配置一下
打开build/webpack.base.conf.js文件，添加如下代码

const vuxLoader = require('vux-loader')

module.exports = {...}			// 修改为如下：
const webpackConfig = {...}

在文件尾部添加代码：

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

打开App.vue，引入初始化样式（已有可不引入）

<style lang="less">
@import '~vux/src/styles/reset.less';
</style>

添加 viewport meta

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

添加 webpack plugin, 在构建后去除重复css代码（通过配置vux-loader实现）

plugins: [
    'vux-ui',
    'progress-bar',
    {
      name: 'duplicate-style',
      options: {
        cssProcessorOptions : {
          safe: true,
          zindex: false,
          autoprefixer: {
            add: true,
            browsers: [
              'iOS >= 7',
              'Android >= 4.1'
            ]
          }
        }
      }
    }
  ]

在main.js添加 Fastclick 移除移动端点击延迟

import FastClick from 'fastclick'
FastClick.attach(document.body)

2.安装`js-cookie

扫描二维码关注公众号，回复： 9618446 查看本文章

npm install js-cookie --save

然后再main.js里面

import cookie from 'js-cookie'
Vue.prototype.$cookie = cookie		//（这样写过后可以全局调用this.$cookie）

安装js-md5

npm install --save js-md5

3.安装Axios

npm install axios --save

在src/main.js配置 axios

import axios from 'axios'

Vue.prototype.$axios = axios;		//（这样写过后可以全局调用this.$axios）

4.安装Less

npm install less less-loader --save-dev

接下来找到bulid目录下的webpack.base.conf.js，找到module下的rules写下

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
}

5.安装vue-wechat-title动态修改title

npm install --save vue-wechat-title

然后在main.js中引入

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

使用的时候路由文件里面要配置上meta字段
路由配置中设置meta:{ title : title名 }
文件里这么写：

<div v-wechat-title="$route.meta.title">

6.安装vuex

npm install vuex --save

然后main.js中引入

import Vuex from 'vuex'
Vue.use(Vuex)

最后src文件夹下新建一个文件名为vuex的文件
vuex>
vuex的目录下建立一个叫modules的文件夹和一个store.js
store.js里面这样配置

import Vue from 'vue'
import Vuex from 'vuex'
import order from "@/vuex/modules/order"
import getters from "@/vuex/getters"

Vue.use(Vuex)

var state = {

}

var mutations = {

}

3. 实例化Vuex.store

const store = new Vuex.Store({
    state,
    mutations,
    getters,
    modules: {
        order,
    }
})

4. 把 store 暴露出去

export default store;

modules文件夹下写各个模块
比如order.js

// import User from "@/api/user"
import cookie from "js-cookie"
const order= {
    namespaced: true,
    state: {

    },
    getters: {

    },
    mutations: {

    },
    actions: {

    },
}
export default order

最后在main.js文件里面引入store

import store from "@/vuex/store.js"
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})