vue2.0项目的搭建及相关工具的安装

搭建条件：已经安装好Node.js并配置了阿里云镜像

一、打开命令行

• 在要创建项目的文件夹下打开cmd。或者在VSCode里打开终端也可以，我通过VSCode的终端打开。

二、cd到你想要创建项目的目录下运行命令

vue create test

• 这里test 是项目名

三、选择vue项目的版本

• 这里默认选择vue2

四、运行项目

• 先切换目录到刚才创建项目的根目录下

cd test

• 运行项目

npm run serve

• 在浏览器打开

五、安装一些工具

• 安装之前停掉项目

安装axios

cnpm install axios -D

• -D是–save-dev的简写

• 他表示安装后将版本信息记录到devDependencies{}里

• 只在开发阶段用到的包，上线后不会用到的依赖包都会记录在devDependencies{}里面

• 然后在main.js文件里将axios挂载在Vue原型上，后面就可以用this.$axios来使用了

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

安装路由

#vue3安装
cnpm install vue-router
cnpm install --save vue-router
#vue2安装
npm i vue-router@3.5.2
cnpm i vue-router@3.5.2

• 然后在src下创建router/router.js文件，在里面设置路由并抛出

  import Vue from 'vue';
  import Router from 'vue-router';
  Vue.use(Router);
  var router = new Router({
      routes:[
          {
              path:"/",
              name:'login',
              component:()=>import('../view/Login.vue')
          }
          //新添加的页面都写在这块...
      ]
  });
  export default router;
  

• 此时应该在src文件夹下创建view目录，然后再创建一个Login.vue文件，不然运行会报错

• 然后由main.js接收并挂载

  import router from './router/router';
  new Vue({
    router,
    render: h => h(App),
  }).$mount('#app')
  

• 最后在app.vue页面展示路由

  <template>
    <div id="app">
      <router-view></router-view>
    </div>
  </template>
  

防止路由重复加载报错

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err)
}

安装sass

cnpm install node-sass sass-loader@7.0.3 -D
cnpm install sass-loader@7.3.1 --save-dev

• 版本不兼容可以换成其他的

• 修改style标签然后运行项目

  <style lang="scss" scoped>//scoped表示样式只在本页面生效
  	...
  </style>
  

• 没有报错则说明sass安装成功

安装UI

cnpm install view-design --save

• 在main.js中配置

  import ViewUI from 'view-design';
  import 'view-design/dist/styles/iview.css';
  Vue.use(ViewUI);
  

六、自定义工具类

缓存工具类

• 在src文件夹下创建工具类文件夹utils在utils文件夹下创建storage.js文件

class Storage {
    /** 
    * @param storage   存储方式localStorage or sessionStorage
    */
    constructor(storage){
        this._storage = storage;
    }
	/** 
    * @param key   键名
    * @param value  键值
    * @param expire  有效期， ms 单位
    */
	set(key,value,expire){
        var obj={value};
        if (expire) {
            obj.t = Date.now() + expire;
        }
        this._storage.setItem(key.toString(),JSON.stringify(obj));
	}
	/**
     * 获取数据
     * @param key   键名
     * @returns     返回键值，如果过期则为空字符串
     */
	get(key){
        var obj = this._storage.getItem(key) ? JSON.parse(this._storage.getItem(key)) : "";
		if (obj && obj.t && obj.t < Date.now()) {
            this.remove(key);
            return "";
        }
		return obj;
	}
	remove(key){
		this._storage.removeItem(key);
	}
}
export const localCache = new Storage(window.localStorage);
export const sessionCache = new Storage(window.sessionStorage);
//使用缓存的页面导入
//import {sessionCache} from '../utils/global.js'

时间工具类

• 在utils文件夹下创建global.js文件

//global.js设置常量
export const MINUTES = 60000;
export const HOURS = 60 * MINUTES;
export const DAY = 24 * HOURS;
export const WEEK = 7 * DAY;
export const MONTH = 30 * DAY;
//使用常量的页面导入
// import {MINUTES,HOURS} from '../utils/global.js'