Dialog、Toast、Loading

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 本地代理跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;

初始化样式

1
2
// 自定义全局css
import "./assets/global.css";

store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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')
编辑文章✏