vue2.0项目的搭建(入门篇)

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

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

vue create test

这里 test 是项目名

三、选择 vue项目的版本

这里默认选择 vue2

四、运行项目

cd test

运行项目

npm run serve

在浏览器打开

在这里插入图片描述

五、安装一些工具

安装之前停掉项目

安装axios

cnpm install axios -D

-D是–s av e–dev的简写
他表示安装后将版本信息记录到devDe p end enci es{}里
只在开发阶段用到的包，上线后不会用到的依赖包都会记录在devDependenci es{}里面
然后在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:()=&gt;import('../view/Login.vue')
        }
        //新添加的页面都写在这块...
    ]
});
export default router;

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

然后由main.js 接收并挂载

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

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

<template&gt;
  <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 &amp;&amp; obj.t &amp;&amp; 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'