在vue2.0的時候我們下載cli的會自動集成webpack配置文件，而vue3.0以后配置文件就不會集成了都是自己在根目錄新建文件配置，那么以前用習(xí)慣2.0的朋友就有些不習(xí)慣還得重新找資料學(xué)習(xí)接下來我會整理一些3.0的用法。

安裝全局vue3.0命令下載cli腳手架
如果電腦有以前的舊版本必須先卸載掉npm uninstall vue-cli -g

//安裝全局命令
npm install @vue/cli -g
//下載腳手架 （vue_project）項(xiàng)目名稱
//下載下來的cli沒有配置文件需要自己去新建配置文件
vue create vue_project

//和2.0舊版本相識用法，自動集成配置文件的3.0版本
npm install -g @vue/cli-init
//下載腳手架 （vue_project）項(xiàng)目名稱
//下載的cli自動集成配置文件，和2.0版本用法基本一致
vue init webpack vue_project

3.0集成目錄簡紹

public 文件夾
1.favicon.ico 是網(wǎng)站圖標(biāo)
2.index.html 頁面入口文件

src 文件夾
main.js 入口js
assets 存放靜態(tài)文件
components 存放公用組件
App.vue 入口vue文件

.eslintrc.js 配置
.gitignore 指定文件無需提交到git上
balel.config.js 使用一些預(yù)設(shè)
package.json 項(xiàng)目描述及依賴
package-lock.json 版本管理使用的文件

上面的目錄是你下載腳手架時自動集成的肯定不利于我們開發(fā)，一般我們開發(fā)都會加一些自己的目錄擴(kuò)展，下面的一張截圖相信大家一看就知道每個目錄的用途

image.png

多環(huán)境運(yùn)營

我們做的項(xiàng)目肯定會在不同的環(huán)境下運(yùn)營，最常用的三種環(huán)境（開發(fā)，生產(chǎn)，測試），這樣呢我們就會做一些環(huán)境的配置，避免來回更換地址相關(guān)配置的麻煩。

第一種方法：
在項(xiàng)目根目錄新建文件 （.env.development，.env.production，.env.test ）
.env.development 模式用于serve，開發(fā)環(huán)境。
.env.production模式用于build，線上環(huán)境。
.env.test 測試環(huán)境

//分別文件內(nèi)寫上配置
VUE_APP_BASE_API = '需要請求API'

//當(dāng)需要用到該變量取值時
process.env.VUE_APP_BASE_API

//更改package.json文件
"scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

第二種方法：
在config文件新建index.js文件，根據(jù)全局的環(huán)境變量來進(jìn)行判斷

const modeUrlObj = {
  // 生產(chǎn)環(huán)境
  'production': {
    baseURL: '需要請求API',
    authBaseURL: ''
  },
  // 開發(fā)環(huán)境
  'development': {
    baseURL: '需要請求API',
    authBaseURL: ''
  },
  // 測試環(huán)境
  'test': {
    baseURL: '需要請求API',
    authBaseURL: ''
  }
}
export default modeUrlObj[process.env.NODE_ENV]
//同樣需要更改package.json文件，package.json與方法一配置相同

引用的方法

import config from '../config/index' // 路徑配置
config.baseURL  // 對應(yīng)環(huán)境api

//運(yùn)行命令
npm run dev // 開發(fā)環(huán)境
npm run test // 測試環(huán)境
npm run build // 正式環(huán)境打包
npm run build:test // 測試環(huán)境打包

vue路由

//下載路由
cnpm install vue-router --save

在router文件新建index.js文件,用來配置路由表

//src/router/index.js文件
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/home';
Vue.use(Router)

const router = new Router({
    mode: 'history',
    routes: [{
        path: '/',
        name: 'Home',
        component: Home
    }]
})

export default router;

在main.js中全局引入掛載路由

import router from './router'; //路由
new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app')

在App.vue文件中寫入<router-view></router-view>這樣就可以正常使用了

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

axios封裝全局引用

src/utils/request.js

// 引用環(huán)境全局環(huán)境
import config from '../config/index.js';
import axios from 'axios'

// 創(chuàng)建axios請求實(shí)例
const request = axios.create({
    baseURL: config.baseURL, // 設(shè)置跨域代理接口統(tǒng)一的前置地址
    timeout: 1000,
    headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'Authorization': localStorage.getItem('token')
    }
})

// 添加請求攔截器
request.interceptors.request.use(function(config) {
    // 在發(fā)送請求之前做些什么
    return config
}, function(error) {
    // 對請求錯誤做些什么
    return Promise.reject(error)
})

// 添加響應(yīng)攔截器
request.interceptors.response.use(function(response) {
    // 只返回?cái)?shù)據(jù)
    return response.data
}, function(error) {
    const status = error.response.status
    if (status >= 500) {
        alert('服務(wù)繁忙請稍后再試')
    } else if (status >= 400) {
        alert(error.response.data.message)
    }
    // 對響應(yīng)錯誤做點(diǎn)什么
    console.dir(error)
    return Promise.reject(error)
})

const get = (url, data) => request.get(url, {
    params: data
})
const post = (url, data) => request.post(url, data)
const DELETE = (url, data) => request.delete(url, data)
const head = (url, data) => request.head(url, data)
const options = (url, data) => request.options(url, data)
const put = (url, data) => request.put(url, data)
const patch = (url, data) => request.patch(url, data)

export {
    get,
    post,
    DELETE,
    put,
    head,
    options,
    patch
}

src/api/index.js(接口不多的時候一個js文件就夠用了，當(dāng)接口過多時可以用index.js文件做主入口文件，新建其他模塊文件便于管理)

import { post } from '../utils/request.js';
// 在組件中可以直接 this.postLogin(傳遞參數(shù)).then()調(diào)用
const install = function(Vue) {
    // 登錄
    Vue.prototype.postLogin = function(body) {
        return post('/user/login', body)
    }
}
export default install;

main.js中全局掛載接口方法（這樣就可以在所有組件中調(diào)用了）

// 掛載全局請求方法
import Api from './api/index';
Vue.use(Api);

在組件中調(diào)用接口

this.postLogin(data).then(res=>{
    console.log(res,'成功返回?cái)?shù)據(jù)')
}).catch(err=>{
    console.log(err,'失敗時返回錯誤')
})

全局配置

vue2.0的時候我們都在集成的webpack中配置我們需要的第三方插件，現(xiàn)在3.0我們需要在項(xiàng)目根目錄新建vue.config.js配置文件。

//vue.config.js全局配置文件
module.exports = {
    //配置css loader
    css: {
        loaderOptions: {
            sass: {
                // sass 版本 9 中使用 additionalData 版本 8 中使用 prependData 舊版本中使用 data
                additionalData: `@import "@/assets/style/main.scss";
                @import "@/assets/style/minxin.scss";`
            }
        }
    },
    // 配置
    configureWebpack: {
        resolve: {
            // 配置別名
            alias: {
                'assets': '@/assets',
                'com': '@/components'
            }
        }
    },
    // 跨域代理
    devServer: {
        proxy: {
            '/api': {
                target: '',
                changeOrigin: true
            }
        }
    },
    publicPath: './', // 編譯后的地址，可以根據(jù)環(huán)境進(jìn)行設(shè)置
    // lintOnSave: true, // 是否開啟編譯時是否不符合eslint提示
}

具體可以參照官網(wǎng)的配置說明，我只是配了一下常用的。
這是我自己基于腳手架搭建的基礎(chǔ)項(xiàng)目為了方便使用，大家不嫌棄的話也可以拿去使用vue3.0，一些沒有的功能后續(xù)還會繼續(xù)完善。