Vue2
版本
项目
创建
vue create single
配置
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
assetsDir: 'static',
devServer: {
port: 3030,
open: true,
}
});
环境区分
- vue.config.js 同级创建文件
- .env.test
NODE_ENV = "test"
VUE_APP_TITLE = "测试"
VUE_APP_URL = "test"
NODE_ENV = "production"
VUE_APP_TITLE = "生产"
VUE_APP_URL = "production"
<title> <%= process.env.VUE_APP_TITLE %>title>
{
"private": false,
"scripts": {
"serve": "vue-cli-service serve --mode test",
"serve1": "vue-cli-service serve --mode production",
"build": "vue-cli-service build --mode test",
"build1": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
}
}
UI
cnpm install [email protected]
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Sass / Scss
cnpm install [email protected] --save-dev
cnpm install [email protected] --save-dev
cnpm install [email protected] --save-dev
axios
import axios from "axios";
let service = axios.create({
baseURL: process.env.VUE_APP_URL,
timeout: 100000,
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
});
service.interceptors.request.use(
function (config) {
let token = localStorage.getItem("token");
if (token) {
config.headers.authorization = token;
}
return config;
},
function (error) {
return Promise.reject(error);
}
);
service.interceptors.response.use(
function (response) {
return response.data;
},
function (error) {
return Promise.reject(error);
}
);
export default service;
import request from "./index";
export async function Ceshi(params) {
return request({
url: "/topics",
method: "GET",
params,
});
}
export async function Ceshi2(data) {
return request({
url: "/Storage/GetStorageLack",
method: "POST",
data,
});
}
router
cnpm i vue-router@3
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const router = new Router({
mode: "hash",
routes: [
{
path: "/",
name: "Cs",
component: () => import("@/view/c.vue"),
},
],
});
export default router;
import router from './router'
new Vue({
render: h => h(App),
router
}).$mount('#app')
vuex
cnpm install vuex@3
export default {
namespaced: true,
state: {
c1: [
{
id: "01001",
name: "如何",
},
{
id: "01002",
name: "如何学好编程",
},
],
},
mutations: {},
actions: {},
};
import Vue from "vue";
import Vuex from "vuex";
import c1 from "./modules/c1";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
c1: c1,
},
state: {
id: "01",
},
mutations: {},
});
import store from './store'
new Vue({
render: h => h(App),
store
}).$mount('#app')
Vue2 多模块打包
MODEL_NAME = "test"
MODEL_NAME = "test1"
let modelName = process.env.MODEL_NAME || "";
let outputDir = modelName ? `dist/${modelName}/` : "dist/";
const config = {
test: {
pages: {
index: {
filename: "index.html",
entry: "src/main.js",
template: "public/index.html"
}
},
devServer: {
port: 3032,
open: true,
}
},
test1: {
pages: {
index: {
filename: "index.html",
entry: "src/main.js",
template: "public/index.html"
}
},
devServer: {
port: 3030,
open: true,
}
},
};
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
...config[modelName],
outputDir: outputDir,
assetsDir: 'static'
});