VUE环境配置 笔记

VUE环境配置

关尔先生2020-12-23 01:04:28
# 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 dprrem;
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 (statepayload) {
      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')




VUE环境配置

上一篇:Vue axios.js model.js

下一篇:vant 弹窗封装

本文链接: http://www.nanshanqiao.com/zz_article/74.html

暂无评论