vue-cli4：create創建最簡單項目后各種手動配置（無less,sass,axios,vuex,router項目腳手架的手動配置）

如果時間緊迫快速搭建一個項目后發現是最原始的簡潔版，沒有任何配置包括：less,sass,axios,vuex甚至router都沒有，又不想重新搭建。只要分別把它們手動下載配置即可：

一：配置router，這個是最基礎的應該有的也是最好配置的。

1：安裝 cnpm install --save vue-router

2：創建：在src下創建router文件夾：內創建index.js

3：導入並掛載到全局（main.js）：import router from "./router/index.js"  

const app = new Vue({
router,
render: h => h(App),
}).$mount('#app')

4:配置詳細路由和規則：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
// 引入組件
import comform from "../components/comform.vue";
import comform2 from "../components/comform2.vue";

const routes = [
    {
        path:"/tab1",
        component: comform
    },
    {
        path: "/tab2",
        component: comform2
    }
]

var router =  new VueRouter({
    routes
})
export default router;

5：展示：router-view（一般配置在首頁app.vue入口處接管）

在想要使用展示路由的地方配置展示和配置跳轉項：如在app.js 入口處template模板

<template>
<div id="app">
<!-- <my-form/> -->
<router-link to="/tab1">顯示1</router-link>
<router-link to="/tab2">顯示2</router-link>
<router-view></router-view>
</div>
</template>

 

6：如果想要根據路由跳轉改變標題增加如下配置：

main.js:

// 根據路由設置標題
router.beforeEach((to, from, next) => {
  /* 路由發生變化修改頁面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

router.index.js改成：

const routes = [{
        path: '/',
        redirect: '/home',
        meta: {
            title: '首頁'
        },

    },
    {
        path: "/home",
        name: "home",
        component: home,
        meta: {
            title: '首頁'
        }
    },
]

 二：vuex配置：

1：安裝：

cnpm install vuex --save-dev

2:導入：
man.js:
import store from './store'

new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')

3:新增文件 sotore/index.js （自定義）

import Vue from "vue";
import Vuex from "vuex";
// import axios from "axios"
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        url: 'http://192.168.6.199/cloudplatform/dist-my/',
        // url:'./',
    },
    mutations: {},
    actions: {},
    //在getters 里面包裝下數據 以便長久儲存數據 防止刷掉
    getters: {},
    modules: {}
})

就可以使用了

三：less/sass配置：

這里列sass:

1：安裝：

npm install node-sass --save-dev
npm install sass-loader --save-dev

如果在創建項目的時候選擇了CSS預處理那個選項，則項目中就會有這兩個包

2：配置：

vue.config.js配置文件中配置css

module.exports = {
   css: {
     loaderOptions: {
        sass: {
            prependData:`@import "./src/assets/scss/style.scss";`   
            }
        }
    }
}

3:使用：

在需要設置全局樣式的地方引入，注意設置style lang=“scss”
<style lang="scss">

#app {
  color: $color;
}
</style>

在實際最新版的cli4創建的項目中實際上已經有默認配置，既第二部去掉也可使用。

四：axios:配置

這里直接像安裝其它依賴包一樣使用就可以，這里推薦了另外一個vueAxios包，它只不過是規范了的axios

1:npm install --save axios vue-axios

2:man.js掛載

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

3：使用：

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})
 
this.axios.get(api).then((response) => {
  console.log(response.data)
})
 
this.$http.get(api).then((response) => {
  console.log(response.data)
})

4：擴展：axios返回的數據進行解析方便使用

// axios
import axios from 'axios'
import VueAxios from 'vue-axios'
// axios.defaults.baseURL="/api";//跨域配置基本url
Vue.use(VueAxios, axios)
//配置 axios 為 表單提交
import Qs from 'qs';  // 引入Qs，這個庫是axios里面包含的，不需要再下載了
const axios_instance = axios.create({
    // config里面有這個transformRquest， 這個選項會在發送參數前進行處理。 這時候我們通過Qs.stringify轉換為表單查詢參數
    transformRequest: [function (data) {
        data = Qs.stringify(data);
        return data;
    }],
    // 設置Content - Type
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})

 

到此最基本常用的包和配置已經好了，剩下的用到什么根據官網進行安裝配置即可如antd，baiduMap，echart等插件或包