# node安装
https://nodejs.org/en/
# 切换到淘宝源
npm config set registry https://registry.npm.taobao.org
# 验证npm源
npm config get registry
# vue/cli
npm install -g @vue/cli
# vue 环境变量
vue 指令无效时：
将vue.cmd所在的路径添加到环境变量Path中，重新打开控制台，再次执行vue -V.
# 安装axios qs less
npm install axios --save
npm install qs
npm install --save less less-loader
# 配置.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
"plugin:vue/essential", "eslint:recommended"
],
rules: {
"no-dupe-keys":"off"
},
parserOptions: {
parser: "babel-eslint"
}
}
# 配置 vue.config.js 本地代理跨域
module.exports = {
//空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
publicPath: "",
outputDir:"dist",
assetsDir:"",//放置生成的静态资源 (js、css、img、fonts) 的目录。
indexPath:"index.html",
filenameHashing:true,
pages:undefined,
runtimeCompiler:false,
devServer: {
disableHostCheck: true,
proxy: {
"/api":{
target:"http:xxxx.com/user/api",
pathRewrite:{"^/api":""}
}
}
},
};
# REM
var dpr, rem;
var docEl = document.documentElement;
var fontEl = document.createElement("style");
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
//rem = docEl.clientWidth * dpr / 10;
var docEl_clientWidth = docEl.clientWidth;
rem = docEl_clientWidth / 10;
//scale = 1 / dpr;
// 设置viewport,进行缩放,达到高清效果
//metaEl.setAttribute("content", "width=" + dpr * docEl.clientWidth + ",initial-scale=" + scale + ",maximum-scale=" + scale + ", minimum-scale=" + scale + ",user-scalable=no");
metaEl.setAttribute(
"content",
"width=" +
docEl.clientWidth +
",initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no"
);
// 设置data-dpr属性,留作的css hack之用
docEl.setAttribute("data-dpr", dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = "html{font-size:" + rem + "px!important;}";
window.dpr = dpr;
window.rem = rem;
# 初始化样式
// 自定义全局css
import "./assets/global.css";
# store.js
import Vue from 'vue'
import Vuex, { mapState,mapGetters,mapActions } from 'vuex'
Vue.use(Vuex)
const ApiUrl = '';
export default new Vuex.Store({
state: {
ApiUrl: localStorage['CurrLine'] || ApiUrl,
UserInfo: localStorage['UserInfo']?JSON.parse(localStorage['UserInfo']):''
},
getters: { //就像计算属性一样, 也可以接受其他 getter 作为第二个参数
oneList: state => {
return state.UserInfo.list?state.UserInfo.list.filter(item=>item.id!=1):''
},
getTodoById: (state) => (id) => { //返回一个函数，来实现给 getter 传参
return state.todos.find(todo => todo.id === id)
}
},
mutations: {
UpdateApiUrl (state, payload) {
state.ApiUrl = payload.data;
localStorage['ApiUrl'] = JSON.stringify(payload.data);
},
},
actions: {
UpdateApiUrl: ({ commit },data) => commit('UpdateApiUrl',{data})
},
modules: {
}
})
Vue.mixin({
computed: {
...mapState([
'ApiUrl' //mapState 辅助函数帮助我们生成计算属性
]),
...mapGetters([
'oneList',
])
},
methods: {
...mapActions([
'UpdateApiUrl'
])
},
})
# main.js
import Vue from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import Model from '@/common/Model'
Vue.prototype.$Model = Model
import util from "./common/Util"
Vue.prototype.$$ = util;
Vue.config.productionTip = false
// 全局引入Footer
import Footer from '@/components/Footer'
Vue.component('Footer', Footer)
new Vue({
router,
store
render: h => h(App)
}).$mount('#app')
