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等插件或包