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

news/2024/7/9 23:54:32 标签: 前端, less, vue

目录

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

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


http://www.niftyadmin.cn/n/5142551.html

相关文章

SOQL使用正则表达式匹配非字母字符

SOQL使用正则表达式匹配非字母字符

Salesforce SOQL (Salesforce Object Query Language) 不支持正则表达式匹配非字母字符&#xff0c;因为SOQL 的正则表达式功能有限。SOQL 支持的正则表达式操作主要用于匹配文本中的字母和数字字符。 如果您需要在Salesforce中执行正则表达式匹配非字母字符&#xff0c;通常需…
阅读更多...
【跟小嘉学 Rust 编程】三十四、Rust的Web开发框架之一: Actix-Web的进阶

【跟小嘉学 Rust 编程】三十四、Rust的Web开发框架之一: Actix-Web的进阶

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…
阅读更多...
STM32智能小车（循迹、跟随、避障、测速、蓝牙、wife、4g、语音识别）总结

STM32智能小车（循迹、跟随、避障、测速、蓝牙、wife、4g、语音识别）总结

目录 1.电机模块开发 1.1 让小车动起来 1.2 串口控制小车方向 1.3 如何进行小车PWM调速 1.4 PWM方式实现小车转向 2.循迹小车 2.1 循迹模块使用 2.2 循迹小车原理 2.3 循迹小车核心代码 2.4 循迹小车解决转弯平滑问题 3.跟随/避障小车 3.1 红外壁障模块分析​编辑 …
阅读更多...
Variations-of-SFANet-for-Crowd-Counting可视化代码

Variations-of-SFANet-for-Crowd-Counting可视化代码

前文对Variations-of-SFANet-for-Crowd-Counting做了一点基础梳理&#xff0c;链接如下&#xff1a;Variations-of-SFANet-for-Crowd-Counting记录-CSDN博客 本次对其中两个可视化代码进行梳理 1.Visualization_ShanghaiTech.ipynb 不太习惯用jupyter notebook, 这里改成了p…
阅读更多...
AI大模型时代网络安全攻防对抗升级，瑞数信息变革“下一代应用与数据安全”

AI大模型时代网络安全攻防对抗升级，瑞数信息变革“下一代应用与数据安全”

AI与大模型技术加速普及&#xff0c;安全领域也在以创新视角聚焦下一代应用安全WAAP变革&#xff0c;拓展新一代数据安全领域。近日瑞数信息重磅发布了瑞数全新API扫描器、API安全审计、数据安全检测与应急响应系统及分布式数据库备份系统四大新品。此次发布在延续瑞数信息Bot自…
阅读更多...
【Linux】Nignx的入门使用负载均衡前端项目部署---超详细

【Linux】Nignx的入门使用负载均衡前端项目部署---超详细

一&#xff0c;Nignx入门 1.1 Nignx是什么 Nginx是一个高性能的开源Web服务器和反向代理服务器。它使用事件驱动的异步框架&#xff0c;可同时处理大量请求&#xff0c;支持负载均衡、反向代理、HTTP缓存等常见Web服务场景。Nginx可以作为一个前端的Web服务器&#xff0c;也可…
阅读更多...
Java使用pdfbox进行pdf和图片之间的转换

Java使用pdfbox进行pdf和图片之间的转换

简介 pdfbox是Apache开源的一个项目,支持pdf文档操作功能。 官网地址: Apache PDFBox | A Java PDF Library 支持的功能如下图.引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox-app</artifactId><version>…
阅读更多...
TypeScript面试知识点？

TypeScript面试知识点？

以下是一些常见的TypeScript面试知识点，可能会在TypeScript相关的面试中被问到： 1：TypeScript的优势和用途： 解释TypeScript相对于JavaScript的优势，如静态类型检查、提供更好的开发工具支持、增加代码可读性和可维护性等。描述在什么情况下选择使用TypeScript，并举例说…
阅读更多...
最新文章

Copyright @ 2022~2023