搭建vue项目的步骤

新建vue脚手架 vue-element-cms步骤:

　　1. vue create ……………(文件名)---这里取为vue-element-cms

　　2.

　　　　命令行工具进入这个文件夹,安装路由依赖包

　　　　npm install vue-router -S

 

　　　　在package.json里查看是否成功安装配置

　　　　

 

　　　　在src文件夹里创建一个router.js文件，里面配置路由，配置如下

　　　　

 

　　　　然后在main.js入口文件引入

　　　　  

　　　　  

 

　　3.  装Vuex状态管理和配置好axios

　　  ①：安装vuex

　　　　      npm install vuex -S

 

　　　　      src创建一个文件夹store，里面创建index.js

　　　　   

 

　　　　　　入口文件main.js导入

　　　　　　

　　　　　　

 

　　　　　 安装dev-tools(有则无需安装)

              　   https://github.com/arcliang/Vue-Devtools-

 

 

　　②：配置axios

　　　　      src中创建utils文件夹 -> 创建fetch.js，内容如下：

import axios from 'axios'

 

let baseURL='http://localhost:8080'

const instance = axios.create({

    baseURL: baseURL,

    timeout: 7000,

    headers: {}

})

 

//请求拦截器：在请求被发送出去之前，做一些验证工作。

instance.interceptors.request.use(function (config) {

    //加token  ----- token作用：是用户鉴权

    config.headers.Authorization=localStorage.getItem('token')|| ''

    return config;

  }, function (error) {

    // Do something with request error

    return Promise.reject(error);

  });

 

  //响应拦截器：在响应到达之前，先进行数据过滤

instance.interceptors.response.use(function (response) {

    if(response.status === 200){

        if(response.data && response.data.msg){

            return response.data.data;

        }else{

            //此处通常会用UI框架做一个弹框.

            alert('网络异常，请稍后再试')

        }

    }

  }, function (error) {

    return Promise.reject(error);

  });

 

  export default instance

 

　　　　      utils文件夹中 -> 创建api.js文件，内容如下

import axios from './fetch'    //引入axios实例

 

//export function ……(){

//  return axios({

//      xxx:xxx,

//      xxx:xxx,

//      ………………

//  })

//}

 

export default {

//    函数名1,

//    函数名2,

//    ………………

}

 

　　　　　  将该实例方法挂载在Vue原型链上，入口文件main.js中

import http from './utils/api'

Vue.prototype.$http = http;

 

　　4.  配置vue.config.js

　　　　　  在根目录(不是src)创建一个vue.config.js文件(vue会自动读取这个文件)

module.exports={

    devServer:{

        port:'8090'

    }

}

 

　　5.  Sass的安装

　　　　　  npm install sass-loader -D(仅开发需要，不用-S)

　　　　　  在使用时找到对应的.vue文件里的style，加上lang='scss'

 

　　6.  组件库的安装

　　　　　  vant,elementUI等等，这里使用element UI

　　　　　  npm install element-ui -S    安装

 

　　　　

 

 

 

 

　　*7.  rem布局文件

　　　　　  如果需要，在public文件夹里创建一个rem.js的文件，里面写上代码，并在public里的index.html里引入

//作用：重置html的font-size

function resetRootFZ(){

    var oHtml=document.querySelector('html');

    var w=oHtml.getBoundingClientRect().width;

    oHtml.style.fontSize=w/10+'px';

}

 

resetRootFZ();

 

//当window窗口尺寸发生变化时，重新设置字体的大小

window.addEventListener('resize',function(){

    resetRootFZ();

})

 

 

 

 

新建vue脚手架 vue-element-cms步骤:

1. vue create ……………(文件名)---这里取为vue-element-cms

2.

命令行工具进入这个文件夹,安装路由依赖包

npm install vue-router -S

 

在package.json里查看是否成功安装配置

 

在src文件夹里创建一个router.js文件，里面配置路由，配置如下

 

然后在main.js入口文件引入

3.  装Vuex状态管理和配置好axios

①：安装vuex

npm install vuex -S

 

src创建一个文件夹store，里面创建index.js

 

入口文件main.js导入

 

安装dev-tools(有则无需安装)

https://github.com/arcliang/Vue-Devtools-

 

 

②：配置axios

src中创建utils文件夹 -> 创建fetch.js，内容如下：

import axios from 'axios'

 

let baseURL='http://localhost:8080'

const instance = axios.create({

    baseURL: baseURL,

    timeout: 7000,

    headers: {}

})

 

//请求拦截器：在请求被发送出去之前，做一些验证工作。

instance.interceptors.request.use(function (config) {

    //加token  ----- token作用：是用户鉴权

    config.headers.Authorization=localStorage.getItem('token')|| ''

    return config;

  }, function (error) {

    // Do something with request error

    return Promise.reject(error);

  });

 

  //响应拦截器：在响应到达之前，先进行数据过滤

instance.interceptors.response.use(function (response) {

    if(response.status === 200){

        if(response.data && response.data.msg){

            return response.data.data;

        }else{

            //此处通常会用UI框架做一个弹框.

            alert('网络异常，请稍后再试')

        }

    }

  }, function (error) {

    return Promise.reject(error);

  });

 

  export default instance

 

utils文件夹中 -> 创建api.js文件，内容如下

import axios from './fetch'    //引入axios实例

 

//export function ……(){

//  return axios({

//      xxx:xxx,

//      xxx:xxx,

//      ………………

//  })

//}

 

export default {

//    函数名1,

//    函数名2,

//    ………………

}

 

将该实例方法挂载在Vue原型链上，入口文件main.js中

import http from './utils/api'

Vue.prototype.$http = http;

 

4.  配置vue.config.js

在根目录(不是src)创建一个vue.config.js文件(vue会自动读取这个文件)

module.exports={

    devServer:{

        port:'8090'

    }

}

 

5.  Sass的安装

npm install sass-loader -D(仅开发需要，不用-S)

在使用时找到对应的.vue文件里的style，加上lang='scss'

 

6.  组件库的安装

vant,elementUI等等，这里使用element UI

npm install element-ui -S    安装

 

 

 

 

 

*7.  rem布局文件

如果需要，在public文件夹里创建一个rem.js的文件，里面写上代码，并在public里的index.html里引入

//作用：重置html的font-size

function resetRootFZ(){

    var oHtml=document.querySelector('html');

    var w=oHtml.getBoundingClientRect().width;

    oHtml.style.fontSize=w/10+'px';

}

 

resetRootFZ();

 

//当window窗口尺寸发生变化时，重新设置字体的大小

window.addEventListener('resize',function(){

    resetRootFZ();

})