idea下搭建基于vue-cli的框架

一时失言乱红尘 2022-03-20 12:24 335阅读 0赞

**目录**

1.准备工作

2.创建工程

3.生成项目

4.配置idea

5.安装babel-polyfill

6.安装axios

7.全局方法

8.参考文献

--------------------

# 1.准备工作 #

先安装好nodejs和npm，安装方法不再赘述，网上有很多教程。使用如下命令查看是否安装成功

> node -v
> 
> npm -v

如下图则为安装成功

![20190212221014378.png][]

如果没有翻墙工具，最好安装阿里的cnpm镜像，以免出现不必要的麻烦。安装淘宝npm镜像：

npm i -g cnpm --registry=https://registry.npm.taobao.org

然后安装vue-cli脚手架

cnpm i -g vue-cli

测试是否安装成功：

vue -V

# 2.创建工程 #

打开idea，创建一个Static Web

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5nY2hhMDA3_size_16_color_FFFFFF_t_70][]

Next，下一步输入项目名称，然后Finish即可。进入idea之后，选择左下角的Terminal，直接通过命令行方式进入到项目中。

PS：为了便于操作，其实也可以先创建项目，然后在Terminal中安装npm和cnpm。

# 3.生成项目 #

在Terminal中执行如下命令，使用脚手架生成项目

vue init webpack

如果你之前对webpack有所接触，其实通过命令不难看出，脚手架创建项目主要还是通过webpack来生成的，这里不得不赞叹一声，webpack实在是太强大了。命令之后之后，会显示  donloading template，然后会一行一行需要输入项目相关信息，我的输入如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5nY2hhMDA3_size_16_color_FFFFFF_t_70 1][]

到这里，一般选择第一项Runtime + Complier即可。

> Generate project in current directory?(当前目录作为工程目录)：Y  
> Project name（工程名）:回车  
> Project description（工程介绍）：回车  
> Author：作者名  
> Vue build（是否安装编译器）:回车  
> Install vue-router（是否安装Vue路由）：回车  
> Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n  
> Set up unit tests（安装测试工具）：n  
> Setup e2e tests with Nightwatch（也是测试相关）：n  
> Should we run \`npm install\` for you after the project has been created? (recommended)：选择：No, I will handle that myself

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5nY2hhMDA3_size_16_color_FFFFFF_t_70 2][]

执行如下命令安装相关Dependencies

cnpm i

PS：cnpm i  = cnpm install 。idea在右下角也会一直有相关提示，让执行Run 'npm install'。最好使用cnpm i 安装，免得有意想不到的麻烦。安装过程根据网速快慢自行等待。安装完成后，就可以直接运行项目了，在命令行执行如下命令：

cnpm run dev

然后浏览器打开：localhost:8080，就可以看到项目已经正常跑起来，Ctrl+C退出运行。

# 4.配置idea #

> File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为**ECMAScript 6**，确认  
> File - Settings - Plugins：搜索vue，**安装Vue.js**  
> Run - Edit Configurations...：点击加号，选择npm，Name为Dev，package.json选择你工程中的package.json，**Command为run，Scripts为dev**,然后就可以直接在idea中运行了。  
> 继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，**Command为run，Scripts为build**,然后就可以直接在idea中打包了。

至此基于vue-cli最基础的vue项目创建完成，下面我们来安装一些常用的组件，然后自己针对项目做一些通用的工具类和规划。

# 5.安装babel-polyfill #

安装babel-polyfill的意义在于，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而可以在现有环境执行。所以你可以用ES6编写，而不用考虑环境支持的问题。如果不安装的话，项目完成开发之后，在chrome浏览器显示正常，但是到百度浏览器或者IE低版本浏览器上就显示错误，主要原因在于ie9和一些低版本的浏览器对es6语法不支持。所以非常有必要安装babel,在命令行执行如下命令：

cnpm i babel-polyfill -D

安装成功之后，修改/build/webpack.base.conf.js文件，找到

module.exports = {
      entry: {
        app: './src/main.js'
    },
    #--> 修改为
    module.exports = {
      entry: {
        app: ['babel-polyfill', './src/main.js']
    },

# 6.安装axios #

axios是一个基于Promise用于异步请求通信的工具，就像jquery的$.ajax一样。安装axios执行如下命令：

cnpm i axios -D
    cnpm i es6-promise -D

其中安装es6-promise主要在于为了兼容在某些安卓版本手机上的axios会出现失败的问题。安装完成之后，在main.js中引入

import 'babel-polyfill'
    import Es6Promise from 'es6-promise'
    Es6Promise.polyfill()

同时也主要是为了做浏览器兼容性，因为如果不这样做，你会发现你的项目在IE下根本无法正常的运行，IE11以下以及Android4.4以下不支持Promise的es6语法。

这里贡献一个平常用的封装好的axios，如下所示：

import axios from 'axios'
    import QS from 'qs'
    import {Loading} from 'element-ui'
    import Router from './../router/index'
    
    import config from './pyconfig'
    //url前缀
    axios.defaults.baseURL = config.ROOT;
    //默认超时时间
    axios.defaults.timeout = 10000;
    //post请求的Content-Type
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    
    var loadingInstance;
    
    //请求过滤,显示加载中
    axios.interceptors.request.use(
      config => {
        let otyp = Object.prototype.toString.call(config.data);
        //只有当data是from类型，并且有noloading字段时候不添加加载等待效果
        if (!(
            ((otyp === '[object FormData]') || (otyp === '[object String]')) && (config.data.indexOf('noloading') > 0))
        ) {
          loadingInstance = Loading.service({
            lock: true,
            text: 'Loading',
          });
        }
       /* if (!ctool.strIsEmpty(store.state.token)) {
          config.headers['X-Auth-Token'] = store.state.token;
        }*/
        if (!ctool.strIsEmpty(ctool.getSessionStor("setToken"))) {
          config.headers['X-Auth-Token'] = ctool.getSessionStor("setToken");
        }
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
    
    //收到数据后的过滤
    axios.interceptors.response.use(
      response => {
        if (!ctool.strIsEmpty(loadingInstance)) loadingInstance.close();
        if (!ctool.strIsEmpty(response.data.result) && ctool.isJson(response.data.result)) {
          response.data.result = JSON.parse(response.data.result);
        }
        if (response.status === 200 && (response.data.code == '0' || response.data.code == 0)) {
          return Promise.resolve(response);
        } else if (response.status === 200 && (response.data.code == '2' || response.data.code == 2)) {
          ctool.msgError('请求校验失败，请重新登录');
          Router.push({name: 'login'});
          return Promise.reject(response);
        } else {
          return Promise.reject(response);
        }
      },
      error => {
        if (!ctool.strIsEmpty(loadingInstance)) loadingInstance.close();
        ctool.msgError('请检查网络');
        return Promise.reject(error.response);
      }
    );
    
    export function get(url, params) {
      return new Promise((resolve, reject) => {
        axios.get(url, {
          params: params
        }).then(res => {
          resolve(res.data);
        }).catch(err => {
          reject(err.data)
        })
      });
    }
    
    /*
     * 入参会被序列化，后台使用getParameter一个一个获取
     */
    export function post(url, params) {
      return new Promise((resolve, reject) => {
        axios.post(url, QS.stringify(params))
          .then(res => {
            resolve(res.data);
          })
          .catch(err => {
            reject(err.data)
          })
      });
    }
    
    /*
     * 入参是js对象，后台直接获取整个对象
     */
    export function postObj(url, params) {
      return new Promise((resolve, reject) => {
        axios.post(url, params)
          .then(res => {
            resolve(res.data);
          })
          .catch(err => {
            reject(err.data)
          })
      });
    }

# 7.全局方法 #

之前在写jsp或者html的时候，会封装一些公用的方法写到公用的js，然后在需要用的地方直接引入对应js使用。vue中对于全局公用的方法可以挂在到windows上，例如：我们封装一个commtool.js，内容如下：

import router from './../router/index'
    import store from "./store";
    import {Message,MessageBox} from 'element-ui'
    
    const commTool = {
      strIsEmpty: function (str) {
        if (str == null || typeof str == undefined || str == "undefined" || str == '' || str == "" || str == 'null') {
          return true;
        }
        return false;
      },
      filterStr: function (str) {
        if (this.strIsEmpty(str)) return '';
        return str;
      },
      setValue: function (key, value) {
        localStorage.setItem(key, value);
      },
      getValue: function (key) {
        return localStorage.getItem(key);
      },
      setSessionStor: function (key, value) {
        sessionStorage.setItem(key, value);
      },
      getSessionStor: function (key) {
        return sessionStorage.getItem(key);
      },
      removeSessionStor: function (key) {
        return sessionStorage.removeItem(key);
      },
      setObj: function (key, obj) {
        obj = JSON.stringify(obj);
        localStorage.setItem(key, obj);
      },
      getObj: function (key) {
        if (this.strIsEmpty(localStorage.getItem(key))) {
          return null;
        }
        var obj = JSON.parse(localStorage.getItem(key));
        return obj;
      },
      removeItem: function (key) {
        localStorage.removeItem(key);
      },
      msg: function (msg) {
        Message( {
          message:msg
        });
    
      },
      msgSuccess: function (msg) {
        Message({
          message: msg,
          type: 'success'
        });
      },
      msgWarn: function (msg) {
        Message({
          message: msg,
          type: 'warning'
        });
      },
      msgError: function (msg) {
        Message({
          message: msg,
          type: 'error'
        });
      },
      msgConfirm: function (str) {
        return new Promise((resolve, reject) => {
          MessageBox.confirm(str, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            resolve()
          })
            .catch(() => {
              reject()
            })
        });
      },
      toNoAccess(msg){
        if (!this.strIsEmpty(msg)) {
          this.msgWarn(msg);
        }
        router.replace({
          name: 'noAccess',
          query: {msg: msg}
        });
      },
      countTime: function (begindate, enddate) {
        var date3;
        var re = new RegExp("-", "g");
        begindate = begindate.replace(re, '/');
        if (!this.strIsEmpty(enddate)) {
          enddate = enddate.replace(re, '/');
          date3 = new Date(enddate).getTime() - new Date(begindate).getTime();
        } else {
          enddate = new Date();
          date3 = enddate.getTime() - new Date(begindate).getTime();
        }
        //计算出相差天数
        var days = Math.floor(date3 / (24 * 3600 * 1000))
        //计算出小时数
        var leave1 = date3 % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000))
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000))
        /*  //计算相差秒数
         var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
         var seconds=Math.round(leave3/1000)*/
        return days + "天" + hours + "小时" + minutes + "分";
      },
      Format: function (fmt, d) {
        var o = {
          "M+": d.getMonth() + 1, //月份
          "d+": d.getDate(), //日
          "h+": d.getHours(), //小时
          "m+": d.getMinutes(), //分
          "s+": d.getSeconds(), //秒
          "q+": Math.floor((d.getMonth() + 3) / 3), //季度
          "S": d.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
      },
      formatDate: function (type, date1) {
        var re = new RegExp("-", "g");
        date1 = date1.replace(re, '/');
        var d = new Date(date1);
        switch (type) {
          case 1:
            return this.Format('yyyy-MM-dd', d);
          case 2:
            return this.Format('yyyy-MM-dd hh:mm:ss', d);
          case 3:
            return this.Format('yyyyMMdd', d);
          default:
            return d;
        }
      },
      setTime:function(picker,time){
      var end = new Date();
      if(time==3){
        end = new Date(new Date(new Date().toLocaleDateString()).getTime()+ 24 * 60 * 60 * 1000 - 1);
      }
      var start = this.getStartTime(time);
      picker.$emit('pick', [start, end]);
    },
      getStartTime:function(time){
        var start = new Date();
        switch (time) {
          case 0://5分钟
            start.setTime(start.getTime() - 5*60 * 1000);
            break;
          case 1://1小时
            start.setTime(start.getTime() - 3600 * 1000);
            break;
          case 2://6小时
            start.setTime(start.getTime() - 3600 * 1000 * 6);
            break;
          case 3://当天
            start = new Date(new Date(new Date().toLocaleDateString()).getTime());
            break;
          case 7://两天
            start = new Date(new Date(new Date().toLocaleDateString()).getTime()-24 * 60 * 60 * 1000);
            break;
          case 8://三天
            start = new Date(new Date(new Date().toLocaleDateString()).getTime()-24 * 60 * 60 * 1000*2);
            break;
          case 9://四天
            start = new Date(new Date(new Date().toLocaleDateString()).getTime()-24 * 60 * 60 * 1000*3);
            break;
          case 4://最近一周
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            break;
          case 5://最近一月
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            break;
          case 6://最近一年
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            break;
        }
        return start;
      }
    }
    
    export default commTool

然后在main.js中，将commTool挂载在windows上，如下：

import commTool from './utils/commTool'
    window.ctool = commTool;

然后在任何地方都可以直接使用ctool.fun进行调用，非常方便。

# 8.参考文献 #

[【1】babel-polyfill遇到的问题记录][1_babel-polyfill]

[【2】安卓4.4版本axios兼容性处理][2_4.4_axios]

[【3】axios全攻略][3_axios]

[【4】廖大神关于Promise的讲解，非常好][4_Promise]

[【5】idea下搭建vue工程，非常好的一篇博文][5_idea_vue]

[20190212221014378.png]: /images/20220320/d4bb11321f5c40baada90cb581576fc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5nY2hhMDA3_size_16_color_FFFFFF_t_70]: /images/20220320/776045ba9eeb45ceaae2e71d7f5fce80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5nY2hhMDA3_size_16_color_FFFFFF_t_70 1]: /images/20220320/3353997e1ef04de2a4e7edcf665c772c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5nY2hhMDA3_size_16_color_FFFFFF_t_70 2]: /images/20220320/66db9917edc34e238646c07d06c48ebb.png
[1_babel-polyfill]: https://www.cnblogs.com/princesong/p/6728250.html
[2_4.4_axios]: http://www.cnblogs.com/lanshengzhong/p/8078741.html
[3_axios]: http://www.cnblogs.com/libin-1/p/6607945.html
[4_Promise]: https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000
[5_idea_vue]: https://www.cnblogs.com/hackyo/p/7988399.html