用vue的UI组件库搭建项目

Dear 丶 2021-10-19 11:46 325阅读 0赞

**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，引入初始化样式（已有可不引入）**

**添加 `viewport meta`**

**添加 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**

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名 }`  
文件里这么写：**

**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/>'
    })