Vue2
版本
- Node 14.14.0
- Npm 6.14.8
- Vue @vue/cli 5.0.3
- npm install -g @vue/cli@5.0.3
- cnpm cnpm@7.1.0
- npm install -g cnpm@7.1.0 --registry=https://registry.npm.taobao.org
项目
创建
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 element-ui@2.15.14
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
Sass / Scss
cnpm install node-sass@6.0.0 --save-dev
cnpm install sass-loader@11.1.0 --save-dev
cnpm install style-loader@3.3.4 --save-dev
<style lang="scss">
.iiii{.sss{color: red;}
}
</style>
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,});}
<script>
import { Ceshi } from "@/http/api";
export default {async created() { var a = await Ceshi();console.log(a);},
};
</script>
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')
<router-view></router-view>
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'
});