VUE 环境配置

安装vue

1. 在vue官网，使用cli命令行脚手架创建基本项目

   
   # 全局安装 vue-cli
   
   npm install --global vue-cli
   
   # 创建一个基于 webpack 模板的新项目
   
   vue init webpack my-project
   
   # 安装依赖，走你
   
   cd my-project
   
   # 或者 yarn
   
   npm install
   npm run dev

2. 运行npm run dev 打开浏览器http://localhost:8080

配置

开发环境vscode

1. 使用eslint规范代码质量

2. vscode安装插件eslint

3. 配置代码格式化规则eslint

   "eslint.autoFixOnSave": true,
   "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
   ],

4. 安装vetur,配置

   "vetur.format.defaultFormatter.html": "js-beautify-html",
   "vetur.format.defaultFormatter.js": "vscode-typescript",

axios

1. 安装yarn add axios

2. 在main.js 中导入并应用

   import axios from 'axios';
   Vue.prototype.$http = axios;

muse-ui

1. 安装yarn add muse-ui

2. 加载main.js

   import Vue from 'vue'
   import MuseUI from 'muse-ui'
   import 'muse-ui/dist/muse-ui.css'
   Vue.use(MuseUI)

3. 图标显示

   下载图标

   解压复制iconfont到static中，然后在index.html引用

mdui

1. 安装yarn add mdui

2. 引入css

   import 'mdui/dist/css/mdui.css';

3. 在需要用mdui api时，引入

   import mdui from 'mdui';

开发环境和生产环境

利用webpack区分两种环境

1. build/webpack.dev.conf.js文件

   在new webpack.DefinePlugin附近

   new webpack.DefinePlugin({
        'process.env': require('../config/dev.env'),
        MONITOR_IP: "'http://127.0.0.1:8360/'",
      }),

   注意：如果配置时字符串的时候，一定要套两层引号，或者使用JSON.stringify("XXXXX")

   下面是集中配置方式

   new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify("5fa3b9"),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: "1+1",
      "typeof window": JSON.stringify("object")
   })

   参考https://segmentfault.com/a/1190000006952432

   DefinePlugin可能会被误认为其作用是在webpack配置文件中为编译后的代码上下文环境设置全局变量，但其实不然。它真正的机制是：DefinePlugin的参数是一个object，那么其中会有一些key-value对。在webpack编译的时候，会把业务代码中没有定义（使用var/const/let来预定义的）而变量名又与key相同的变量（直接读代码的话的确像是全局变量）替换成value。例如上面的官方例子，PRODUCTION就会被替换为true；VERSION就会被替换为'5fa3b9'（注意单引号）；BROWSER_SUPPORTS_HTML5也是会被替换为true；TWO会被替换为1+1（相当于是一个数学表达式）；typeof window就被替换为'object'了。

2. 配置完成后，就可以在代码中直接使用，但是因为eslint的关系，会提示变量没有定义，但其实是可以直接用的。需要手动指定变量为全局变量

   /* global MONITOR_IP:true */

简单基于token的身份认证

1. 页面跳转时，判断localStorage是否有token，有则next(),没有跳转到登陆

2. 本应用使用cas单点登录方式，所以跳转到cas登陆页面

3. 登陆成功自动跳转到应用的登陆页面，登陆应用获取token

4. 获取token后，把token放到localStorage

5. 然后跳转到首页

6. 配置axios 请求拦截器，如果localStorage里有token则在头部加入Authorization

   http.interceptors.request.use(config => {
    if (localStorage.token) {
      config.headers = {
        'Authorization': `Bearer ${localStorage.token}`
      };
    }
    return config;
   });

   ​