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

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

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'
})

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

目录
相关文章
|
2月前
|
前端开发 JavaScript
前端项目公共组件封装思想
该文介绍了如何封装通用组件,如表单搜索、表格展示和分页器。首先,通过抽离出公共部分,创建`TableContainer`组件,利用具名插槽插入`navbar`和`table`,并通过props传递标题。然后在父组件中使用具名插槽和子组件实现具体功能。文中还展示了更复杂的组件封装示例,通过props实现数据双向绑定,以`el-pagination`为例,利用`sync`修饰符和`computed`属性监听并更新父组件状态,实现分页功能。文章最后提到了内容来源于哪。
|
18天前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
23天前
|
敏捷开发 缓存 前端开发
阿里云云效产品使用问题之流水线构建前端项目比较慢。该如何优化
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
1月前
|
前端开发 Shell 容器
前端练习小项目——视觉冲击卡片
前端练习小项目——视觉冲击卡片
|
11天前
|
前端开发 JavaScript 安全
前端技术栈都有那些,需要学会啥才可以上手写项目?
【7月更文挑战第9天】 前端技术栈包括HTML/CSS/JS基础,熟悉Vue.js/React/Angular等框架,掌握Git、Webpack等工具,理解HTTP协议及安全概念。使用Node.js和编辑器提升效率,从基础到框架层层深入,实践项目以巩固知识,持续学习应对技术更新。
20 0
|
1月前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
39 3
|
16天前
|
前端开发 测试技术 API
前端必备的【项目知识】
前端必备的【项目知识】
17 0
|
16天前
|
前端开发 JavaScript 应用服务中间件
windows server + iis 部署若伊前端vue项目
5,配置url重写规则(重写后端请求) 注:如果没有Application Request Routing Cachefourcloudbdueclaim和URL重写,则是第二部的那两个插件没装上 打开iis,点击计算机->点击Application Request Routing Cache -> 打开功能
46 0
|
16天前
|
开发框架 前端开发 JavaScript
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
|
16天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target