从0开始搭建一个前端项目的架子

1.概述

2.项目搭建

3.elementUI

4.CSS预处理器

5.重置CSS

6.图标库

7.axios和路由

7.1.axios

7.2.路由

7.3.路由懒加载和异步组件

1.概述

在古早时代，只需要会html、css、js、ajax就能开发一个前端项目，这些技术的上手成本也不高，所以搭建一个前端架子的学习成本是相对较低的。但随着前端技术的发展，为了提高前端的工程化效率，出现诸如UI框架、JS框架、CSS预编译语言、打包工具等等各种各样的轮子，时至今日我们发现要开发一个前端项目，光是搭架子，都需要学习杂七杂八很多东西。

这些内容对于专业前端来说还好，但是实际工作中需要接触到前端项目的其实是不止专业前端，有时候前端资源抽不出身，一些小的页面修改、配置的变动、版本管理、依赖的变动，后端、运维等岗位的小伙伴可能都要亲自动手去改一下前端。尤其是后端的小伙伴，可能时不时就要去看看前端项目。但是打开前端项目的时候可能大家都有种懵逼的感觉：

项目怎么长这么？这还是我认识的html、css、js吗？

本文的目的就是从0开始搭建一个当前主流的基于vue的架子，其中会填充node、webpack、css预处理器、图标库、http请求组件、路由等内容，让大家一步明白，当前主流的一个前端架子都有什么东西？它们又是用来干什么的？当然这也是博主vue实战系列的先导文章，后续会基于这个架子开发一个小的vue实战项目，敬请期待后续的文章。

项目先用vue2来开发，然后重构升级成vue3。

2.项目搭建

一切开始之前我们要搞清楚一件事儿，就是关于依赖的安装，node.js的安装就不赘述了，大家应该都知道现在都是用node.js来进行前端的依赖管理的。npm安装依赖有两种方式：

全局安装，npm install -g <package>，依赖会被安装到node 的cache下面，全局都可以使用。
局部安装，npm install <package>，依赖会被安装到当前项目的node_module下面，只有当前项目可以用。

1.安装脚手架:

由于脚手架的升级，5.X版本以后的脚手架隐藏了很多细节，所以用4.5.15来搭建初始化的项目，展示更多细节。

npm i -D @vue/cli@4.5.15

2.使用脚手架创建项目：

创建一个名叫project-v2的vue项目

npx vue create project-v2

创建出来的项目结构：

3.配置浏览器自动打开：

每次项目启动后需要手动打开浏览器，输入地址端口号，还是很不方便的，在配置文件中可以配置浏览器自动打开首页。在package.json下新建vue.config.js：

module.exports = {  
    devServer:{
      open:true,
      host:'localhost'
    }
  }

这样每次启动项目后都会自动打开浏览器。

3.elementUI

我们选用elementUI作为UI框架，element最好的介绍其实就在其官网上，甚至直接可以拷代码来改一改就能用了，这没什么好多说的。要注意的是，elementUI搭配vue2使用，element-plus搭配vue3使用。

npm i element-ui -s

-s是全局安装的意思

安装后在main.js中引入

import ElmentUI from 'element-ui';

import 'elemnt-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

当然为了main.js的清爽，最好的方式还是单独写个js用来管理element的依赖引入，在main.js中引入这个js即可：

element.js:

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

main.js中引入element.js:

import '../plugins/element.js'

4.CSS预处理器

css预处理器，也叫css预处理语言，说的直白点就是赋予css一些编程属性，使得css更加好用易读。关于css预处理器可以移步看博主的另一篇博文：

【CSS预处理语言】less快速入门-CSDN博客

这里我们选择less作为css预处理器，引入依赖：

npm i less@3 less-loader@7 -S

在每个.vue组件内部的style里写各自的样式即可：

<style lang="less">
.hello{
  background-color: blue;
  .el-button{
    color: red;
  }
}
</style>

5.重置CSS

html标签在浏览器中都有各自的默认样式，比如： p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE 下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。

解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。覆盖浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

给一份博主的重置css：

html,
body {
  height: 100%;
  /* 文字风格 Sans-serif 各笔画粗细相同，Serif 笔画粗细不同，monospace 等宽体，cursive草书，fantasy梦幻 */
  font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial,
    '黑体', '宋体', Arial;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-size: 14px;
  color: #333;
}
 
/* 重置各标签的默认样式 */
a,
body,
center,
cite,
code,
dd,
del,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hr,
html,
img,
input,
label,
legend,
li,
mark,
ol,
p,
section,
span,
textarea,
time,
td,
th,
ul {
  margin: 0;
  border: 0;
  padding: 0;
  font-style: normal;
  box-sizing: border-box;
  /*  自动换行 */
  word-wrap: break-word;
  /*  强制英文单词断行 */
  word-break: break-all;
}
 
/*  设置标签为块级分类 */
article,
aside,
details,
fieldset,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}
 
/* 去除input标签的默认样式 */
button,
input,
textarea {
  -webkit-appearance: none;
  font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial,
    '黑体', '宋体', Arial;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 1em;
  line-height: 1em;
  outline: none;
  background-color: transparent;
}
 
/*  禁止多文本框手动拖动大小 */
textarea {
  resize: none;
  -webkit-appearance: none;
}
 
/* 去掉按下的阴影盒子 */
input,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}
 
/*  清除a标签下划线 */
a,
a:visited {
  text-decoration: none;
}
a:focus,
a:active,
a:hover {
  outline: none;
}
 
/*  清除列表前面的点 */
ol,
li,
ul {
  list-style: none;
}
 
/*  清除IE下图片的边框 */
img {
  border-style: none;
  font-size: 0;
}
 
/*  解决chrome浏览器默认黄色背景问题 */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
 
/*  设置默认滚动条样式 */
::-webkit-input-placeholder {
  color: #afbdcc;
}
:-moz-placeholder {
  color: #afbdcc;
}
::-moz-placeholder {
  color: #afbdcc;
}
:-ms-input-placeholder {
  color: #afbdcc;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
::-webkit-scrollbar-track-piece {
  background-color: #f5f5f5;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 6px;
}
::-webkit-scrollbar-corner {
  background-color: #f5f5f5;
}
::-webkit-resizer {
  background-repeat: no-repeat;
  background-position: bottom right;
}

在主组件（App.vue）中引入，可以完成对全局样式的设置：

<style lang="less">
@import url('./assets/css/reset.css');
</style>

6.图标库

安装依赖：

npm install -D font-awesome

导入依赖：

main.js

import 'font-awesome/css/font-awesome.min.css'

使用：

组件中使用

font-awesome是通过class来使用的，都以fa开头，可以试一下：

<i class="fa fa-users"></i>

7.axios和路由

7.1.axios

使用axios来进行http请求：

npm install axios -S

安装axios:

import axios from 'axios'
//挂载到原型，可以在全局使用
Vue.prototype.axios=axios

7.2.路由

1.安装路由：

router和vue版本是有对应关系的，否则会报错，注意一下。

npm install vue-router@3.5.3 -S

2.配置路由：

在src下面建一个用来专门装路由配置文件的文件夹router，在文件夹里新建一个路由的配置文件index.js。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            component:HelloWorld
        }
    ],
    mode:'history'
})

3.挂载路由：

在main.js里面。

import Vue from 'vue'
import App from './App.vue'
import '../plugins/element.js'
import 'font-awesome/css/font-awesome.min.css'
import axios from 'axios'
import router from './router'
//挂载到原型，可以在全局使用
Vue.prototype.axios=axios
Vue.config.productionTip = false

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

使用到路由后，主组件（App.vue）里面就不能直接引入组件，需要通过路由来转跳组件：

<template>
  <div id="app">
    //路由转跳
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App'
}
</script>

<style lang="less">
@import url('./assets/css/reset.css');
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

7.3.路由懒加载和异步组件

import的时候其实组件就已经被加载了，为了节约资源，可以使用路由懒加载的写法，不用先import再使用，而是用到的时候再import。懒加载写法是ES6才支持的特性，要注意浏览器是否支持ES6。

原来的写法：

import Vue from 'vue'
import Router from 'vue-router'
//import的时候其实组件就已经被加载了
import HelloWorld from '../components/HelloWorld.vue'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            component:HelloWorld
        }
    ],
    mode:'history'
})

懒加载的写法：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            component:()=>import('@/components/HelloWorld')
        }
    ],
    mode:'history'
})

也可以用异步组件的方法来完成懒加载的效果：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            component:resolve=>require(['@/components/HelloWorld'],resolve)
        }
    ],
    mode:'history'
})

至此一个完整的前端项目的架子搭建完成。