一、項(xiàng)目創(chuàng)建

1、安裝vue-cli

cmd：npm install -g @vue/cli@4.5.19

驗(yàn)證是否安裝成功：vue -v? ?出現(xiàn)版本號說明安裝成功

2、創(chuàng)建項(xiàng)目

vue create 項(xiàng)目名稱

根據(jù)自己的需求選擇特性，如下所示：

手動(dòng)選擇：

選擇自己需要的特性：例如：

選擇vue版本

選擇路由模式 （輸入y和n都可以，y代表history模式?jīng)]有#號， n代表hash模式有#號）：

選擇css預(yù)處理器，根據(jù)需求自行選擇：

格式化和代碼檢測的配置，默認(rèn)的就行：

代碼格式檢測時(shí)機(jī)，默認(rèn)就行：

你希望配置放在哪：

是否保存特性，根據(jù)你的需求來：

?輸入：?cd 項(xiàng)目名稱
? ? ? ? ? ? ?npm run serve

二、組件的配置（以vant組件為例）：

1、安裝組件：npm i vant@latest-v2 -S（手機(jī)端）

? ? ? ? ? ? ? ? ? ? ? ? Vant 2 - Mobile UI Components built on Vue
? ? ? ? ? ? ? ? ? ? ? ?npm i --save ant-design-vue@1（PC端）

? ? ? ? ? ? ? ? ? ? ? ??Ant Design Vue

2、引入組件：以全部引入（簡單粗暴）為例：在main.js中導(dǎo)入

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

3、主題色的設(shè)置：

vue cli是版本4，所以用vue cli3定制；

項(xiàng)目根目錄下新建文件vue.config.js：

// vue.config.js for less-loader@6.0.0
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

將main.js中的import 'ant-design-vue/dist/antd.css'改為import 'ant-design-vue/dist/antd.less'；
將package.json中的"less-loader": "^5.0.0",改為"less-loader": "6.0.0",

然后在集成終端輸入npm i less-loader@6.0.0 -D或者直接將less-loader改為6.0然后npm i?

三、配置代理：

項(xiàng)目根目錄下新建文件vue.config.js：

// vue.config.js for less-loader@6.0.0
module.exports = {

    //配置代理
    devServer:{//所有的配置項(xiàng)
        proxy:{//配置
            //不設(shè)置 重寫  http://wkt.myhope365.com/weChat
            //設(shè)置重寫   http://wkt.myhope365.com
            '/course-api':{//代理名稱,這里最好有一個(gè)
                target:'https://course.myhope365.com/api', // 后臺接口域名
                changeOrigin:true,//是否跨域
                pathRewrite:{
                    '^/course-api':''//路徑重寫
                }
            },
            // 'api':{
            //     target:'https://course.myhope365.com', // 后臺接口域名
            //     changeOrigin:true,//是否跨域
            //     // pathRewrite:{
            //     //     '^/course-api':''//路徑重寫
            //     // }
            // },
        }
    }
};

?四、封裝axios:

安裝axios：axios:npm i axios -S

引入axios（在main.js文件中）： import axios from "axios";

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Vue.prototype.$axios = axios（掛載）

封裝axios：（src->api->axios.js）

// 對http請求進(jìn)行封裝
import axios from 'axios'

// 使用自定義的配置文件發(fā)送請求
const instance = axios.create({
    baseURL: '',
    timeout: 5000,
    headers: {
    }
});
// 添加請求攔截器
instance.interceptors.request.use(function (config) {
    // 在發(fā)送請求之前做些什么
    return config;
}, function (error) {
    // 對請求錯(cuò)誤做些什么

    return Promise.reject(error);
});

// 添加響應(yīng)攔截器
instance.interceptors.response.use(function (response) {
    instance// 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
    if(response.status === 200){
        return response.data;
    }else{
        console.error("請求錯(cuò)誤")
        console.error(response)
    }
    return response;
}, function (error) {
    // 對響應(yīng)錯(cuò)誤做點(diǎn)什么
    return Promise.reject(error);
});

export default instance

?文章來源地址http://www.zghlxwxcb.cn/news/detail-737863.html

?

到了這里，關(guān)于使用vue-cli創(chuàng)建vue2項(xiàng)目以及項(xiàng)目配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！