gitlab上新建一个仓库，

2.在本地clon下这个项目，然后在文件夹内开始搭建vue项目

可以先安装cnpm 可要可不要（npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好）

　1、全局安装vue-cli

npm install --global vue-cli（npm i -g @vue/cli）

2、进入项目目录，创建一个基于 webpack 模板的新项目

　　Vue build ==> 打包方式，回车即可；

　　　　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到所以Y 回车；

　　　　Use ESLint to lint your code ==> 是否需要 js 语法检测目前我们不需要所以 n 回车；

　　　　Set up unit tests ==> 是否安装单元测试工具目前我们不需要所以 n 回车；

　　　　Setup e2e tests with Nightwatch ==> 是否需要端到端测试工具目前我们不需要所以 n 回车；

用工具打开项目文件，npm i安装依赖

npm install --save element-ui 安装elementui

npm install --save scss 安装scss

npm install sass-loader -D

npm install node-sass -D

npm install --S axios 安装axios

npm install vuex-persistedstate --save 安装持久化插件

---启动

axios配置

在vue.config.js文件中添加请求代理

devServer: {

    // host: "0.0.0.0",

    proxy: {

        "/web": {

            target: "http://47.122.40.115", //测试站

            changeOrigin: true,

            // rewrite: (path) => path.replace(/^\/api/, ""),

        },

        "/profile": {

            target: "http://47.122.40.115", //测试站

            changeOrigin: true,

            // rewrite: (path) => path.replace(/^\/api/, ""),

        }

    }

},

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const webpack = require('webpack')

function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.resolve.alias
        .set('@', resolve('src'))
        // key,value可以自行定义，比如.set('@@', resolve('src/components'))
        .set("assets", resolve("src/assets"))
        .set("components", resolve("src/components"))
        .set("utils", resolve("utils"))
},

devServer: {
    // host: "0.0.0.0",
    proxy: {
        "/web": {
            target: "http://47.122.40.115", //测试站
            changeOrigin: true,
            // rewrite: (path) => path.replace(/^\/api/, ""),
        },
        "/profile": {
            target: "http://47.122.40.115", //测试站
            changeOrigin: true,
            // rewrite: (path) => path.replace(/^\/api/, ""),
        }
    }
},
  lintOnSave:false,//这里禁止使用eslint-loader
})

2.添加一个utils文件夹

添加request文件以及utils

request:

import axios from "axios";
import router from "@/router";
// import { translate as $t } from "@/lang"
 // import store from "@/store";
const baseURL = ""
const service = axios.create({
    baseURL,
    timeout: 20000,
});
// 发起请求之前的拦截器
import { getToken, clearToken, getLang } from "@/utils/util";
import { Message } from 'element-ui'

service.interceptors.request.use(
    (config) => {
        // 如果有token 就携带tokon
        if (config.headers.type == 2) {
            config.headers['Content-Type'] = "application/json;charset=UTF-8"
            delete config.headers.type
        }
        config.headers.lang = getLang()
        const token = getToken();
        if (token) {
            config.headers.Authorization = token;
        }
        if (Object.prototype.hasOwnProperty.call(config, "token")) {
            config.headers.Authorization = config.token;
        }
        return config;
    },
    (error) => Promise.reject(error)
);


// 响应拦截器
service.interceptors.response.use(
    (response) => {
        const res = response.data;
        if (res.code == 401) {
            Message($t('aginLogin'));
            clearToken()
            router.replace({
                path: "/home"
            })
            return res
        }
        if (response.status !== 200) {
            return Promise.reject(res);
        } else if (res.code != 200) {
            console.log("错误提示", res)
            Message(res.msg);
            Promise.reject(res);
            return res
        } else {
            return res;
        }
    },
    (error) => {
        Message("服务器连接失败");
        return Promise.reject(error);
    }
);
export default service;

utils:

import store from "@/store";
export function getToken() {
  return store.state.user.token;
}
export function clearToken () {
  localStorage.removeItem("vuex")
  store.commit('user/clear')
}
// 用*代替前面位数
export function onlyFourBank (value) {
	if (value && value.length > 4) {
        let num = value.length % 4
        num = num == 0 ? 4 : num
		return `${"*".repeat(value.length - num)}${value.slice(-num)}`;
	}
	return value;
}
// 每四位隔开
export function fourNums (num) {
 	if (!num) return
    let value = num.replace(/(.{4})/g, "$1 ")
    return value.split(" ").filter(v => v.length > 0)
} 

export function getLang () {
  return localStorage.getItem("language") || "en-US"
}

新加一个api文件夹用于放接口地址

import service from "@/utils/request";
/**
 * @export 获取支付信息
 */
 export function helpTypeList(data = {}) {
    return service({
      url: "/web/hc/type/list",
      method: "get",
      data,
    });
  }

component存放公用组件

在component地下创建一个index.js

import Vue from 'vue'
function changeStr (str){
    return str.charAt(0).toUpperCase() + str.slice(1);
}
const requireComponent = require.context('./',false,/\.vue$/); // './'操作对象为当前目录
requireComponent.keys().forEach(element => {
    const config = requireComponent(element);

    const componentName = changeStr(
        element.replace(/^\.\//,'').replace(/\.\w+$/,'')
    )

    Vue.component(componentName, config.default || config)
})

在main.js中映入

import '@/components'

可能会报错：

1.resolve is not defined

在vue.config.js 文件中 module.exports 上面添加

const path = require('path')

const webpack = require('webpack')

function resolve(dir) {

return path.join(__dirname, dir)

}

2.element的标签或者样式不能引用

在main.js中加

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

gitlab 上建立一个vue项目

1.resolve is not defined

2.element的标签或者样式不能引用

猜你喜欢