vue-cli4搭建项目流程

一直使用的是vue-cli2，最近打算升级到vue-cli4，所以有了这篇文章。

一、下载vue-lic4，下载方法与cue-cli2略有不同

npm install -g @vue/cli
vue create my-project

 

二、一些基础配置

（1）使用saas

npm install style-resources-loader vue-cli-plugin-style-resources-loader -D
npm install node-sass -D
npm install sass-loader -D

 创建vue.config.js

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'sass',
      patterns: [
        path.resolve(__dirname, './src/assets/*.scss')      //你的.scss文件所在目录
      ]
    }
  }
}

（2）按需引入mint-ui

npm install mint-ui --save
npm install babel-plugin-component -D

在babel.config.js文件中进行按需引入的配置

module.exports = {
  presets: ["@vue/app"],
  plugins:[
      [
        "component",
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]
  ]
};

（3）使用lib-flexible进行h5页面的适配

npm install lib-flexible --save
npm i postcss-px2rem-exclude -D//postcss-px2rem-exclude可以忽略指定文件，将px转换为rem，且忽略node_modules目录下的文件

问题：为什么要 忽略node_modules目录下的文件？

答：因为第三方库在node_modules里。有时候我们在手机端项目的时候需要导入第三方UI库，例如：VUX,MINT等，这时你就会发现第三方的组件样式都变小了，变小的主要原因是第三库 css一依据 data-dpr="1" 时写死的尺寸，我们使用的flexible引入时 data-dpr不是一个写死了的，是一个动态的，就导致这个问题。

main.js

import 'lib-flexible'  //导入lib-flexible

index.html

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

package.json添加

 

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude":{
          "remUnit": 37.5,
          "exclude":"/node_modules|floder_name/i"
      }
    }
  }

 （4）引入axios

 

npm install axios --save

在main.js中进行挂载，这样就可以在全局任意使用

import axios from "axios"
Vue.prototype.$axios = axios

 （5）使用vue-router

npm install vue-router --save

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

let routes = new Router({
    routes: [
        { path: '/', component: () => import('../views/index.vue'),name:'index' },
        { path: '/bind', component: () => import('../views/bind.vue'),name:'bind' },
      ]
});
// 提供接口给外面使用
export default routes;

 （6）使用vuex

npm install vuex --save

新建文件夹store

index.js中写配置，将modules里的文件集成到index.js中，就不需要一个一个引入

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex);
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// 动态加载modules的文件
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

export default new Vuex.Store({
    modules,
    plugins: [createPersistedState()]
});

（7）改为本地访问地址

vue.config.js

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'sass',
      patterns: [
        path.resolve(__dirname, './src/assets/*.scss')      //你的.scss文件所在目录
      ]
    }
  },
  devServer:{
     host: '192.168.31.88',  // 匹配本机IP地址
     port:"8081",
  }
}

（8）取消eslint

vue.config.js

const path = require('path')
module.exports = {
  lintOnSave:false,
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'sass',
      patterns: [
        path.resolve(__dirname, './src/assets/*.scss')      //你的.scss文件所在目录
      ]
    }
  },
  devServer:{
     host: '192.168.31.88',  // 匹配本机IP地址
     port:"8081",
  }
}

（9）@配置

vue.config.js

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
  lintOnSave:'warning',
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'sass',
      patterns: [
        path.resolve(__dirname, './src/assets/*.scss')      //你的.scss文件所在目录
      ]
    }
  },
  devServer:{
     host: '192.168.31.88',  // 匹配本机IP地址
     port:"8081",
  },
  chainWebpack: config => {
      config.resolve.alias.set("@", resolve("src"));
  },
}

（10）下载vuex持久化工具vuex-persistedstate

npm install --save vuex-persistedstate

启动：npm run serve

这样整个vue-cli4项目搭建流程基本完成了。