Vue项目搭建过程（个人）

        这是一章关于vue-cli搭建项目的流程文章分享，属于目前个人的使用过程，观点不同勿喷

 ---------------------------------------------------------嘿嘿嘿------------------------------------------------------------

首先Node.js下载

首先node.js在官网直接无脑安装

 配淘宝镜像（配好后所有npm的命令都可以用cnpm替代，比npm更快）

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

vue-cli

cnpm uninstall -g @vue/cli  //全局卸载vue-cli
  
cnpm install -g @vue/cli  //全局安装

创建项目（在已经创建的文件夹中，cmd大家应该都懂）

vue create 项目名  （选择最下面的自定义安装,选择需要的配置）

 这个是安装模块包(如果项目中没有node_modules则可以用这个下载)

cnpm install 

启动项目(一定要到你的创建的项目目录中)

cnpm run serve 

需要则引入vue最常用的element-ui库

引入element-ui库
	npm i element-ui -S   执行此命令
将下面两行代码复制到main.js最顶部即可
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	Vue.use(ElementUI);

后面如果要进行cdn优化则以后再说

 引入axios，用于请求接口

cnpm install axios或者cnpm i axios -S

封装axios

封装axios文件：
在src下创建一个util的文件夹，里面新建service.js

import axios from "axios";

const service = axios.create({
    //baseURL会自动加在接口地址上
    baseURL:"/",
    timeout:5000,//指定请求的超时毫秒数，如果请求超过这个时间，请求自定中断
    headers:{
        'Content-Type':'application/json; charset=utf-8'
    }
})

//添加请求拦截器
service.interceptors.request.use(function(config){
    //在请求之前做些什么
    return config
},function(error){
    //对请求错误做些什么
    return Promise.reject(error)
})

//添加响应拦截器
service.interceptors.response.use(function(response){
    //对响应数据做些什么
    return response
},function(error){
    //对响应错误做些什么
    return Promise.reject(error)
})

//封装完成后导出
export default service

 main.js引入封装好的axios：

//引入axios以及配置后的axios
import axios from 'axios'
import service from '@/util/service'
Vue.prototype.axios = axios//挂载到原型，可在全局使用
Vue.prototype.service = service//service挂载到原型可全局使用

既然弄到axios了那就顺便把如何使用封装好的axios也给大家安利了吧

getAllList(){
        this.service.get('/getAllList')
        .then(res =>{
            //状态码等于200将数据赋值给声明的数据data中
            console.log(res)
            if(res.status===200){
                this.AllList= res.data.data;//数据赋值
                //控制台打印当前声明数组中的数据
                console.log(this.topArticleList);
            } 
        })
        .catch(function(error){
            console.log(error);
        })
      }

温馨提示：这里只是方法哦，其中AllList需要在data里声明数组，方法要在mounted中调用

接着继续我们搭建项目吧----》

为了写项目方便我一般会初始化vue中的css样式

在assets文件中新建一个css文件夹，在里面新建一个reset.css文件，
在里面初始化内外边距/ul/a/img/body等公共样式
然后再main.js中导入初始化css文件
import '@/assets/css/reset.css'

有时候我也会用到css的预处理less

cnpm install less-loader@5.0.0 -D


<style lang='less' scoped>

</style>

即可

书写规范可以嵌套例如(首先你的布局也是这样的顺序进行嵌套)

.a{
    .b{
       .d{
       }
   }
    .c{
       .e{
       }
   }
}

如果有错误可以到我参考一下我这篇文章，是我引入less遇到的问题

****解决引入less遇到问题

还有前置守卫是必要的吧，可以先写下，注释起来，用的时候再把它放出来

//全局前置守卫(多用于登录)
router.beforeEach((to,from,next)=>{
  //路径为list放行登录
  if(to.path=="/list"){
    next();
  }else{
    //路径为/的时候自动跳转到/list
    if(to.path=="/"){
      next("/list");
    }
  }
});

结尾最后再给大家分享一个无用的小知识

css分离

如果想把css分离则可以把css文件放置在assets下的文件中
// 引入css
<style scoped>
    @import '@/assets/css/你的css样式表文件.css'; 
</style>

要结束喽！

卷不死就要往死里卷！奥里给给