前端学习基础掌握支持

最新推荐文章于 2025-03-30 17:52:23 发布

原创最新推荐文章于 2025-03-30 17:52:23 发布 · 251 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端基础 #环境基础

ProjectRecord 专栏收录该内容

3 篇文章

订阅专栏

该博客介绍前端开发支持，涵盖HTML、CSS、JavaScript等技术。提及HTML新特性、CSS3及less开发，ES6语法转化借助webpack和babel。还介绍了webpack构建工具、ESlint代码规范、Node环境、npm包管理，以及git多分支开发操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML
h5基本标签、新特性
参考手册：https://developer.mozilla.org/zh-CN/docs/Web/HTML

CSS
css参考手册：https://www.html.cn/book/css/all-properties.html
css3新特性
本框架支持less开发
less 官网：http://www.bootcss.com/p/lesscss/
开发语法类似css写法，应用css类名嵌套的形式来做，加入变量、继承、运算和函数的概念
比如：

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

JavaScript
参考手册：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
ES6语法：http://es6.ruanyifeng.com/

将ES6转化为浏览器支持的运行代码
框架依赖webpack配置了babel：https://www.babeljs.cn/docs/learn
（后续）

webpack
webpack 作为项目的构建工具：https://webpack.docschina.org/concepts/
当前只有一个入口文件，样式或者babel等模块的加载进入项目是用loader来配置的：
用到的loader有：
babel-loader
url-loader
file-loader
style-loader
css-loader
less-loader
eslint-loader

反向代理：

 proxy : {
    "/api":{
      "target":"http://rap2api.taobao.org/app/mock/175959",
      "changeOrigin":true,
      "pathRewrite": {
        "^/api": "/"
      }
    },
 }

ESlint
项目中应用了ESlint来规范代码
为了全局方便，IDE的Eslint的配置全局设置了一下(如果是以项目为单位，在项目根目录下创建.eslintrc文件)：
eslint规则查阅链接：
https://blog.youkuaiyun.com/p358278505/article/details/77429251 || https://cn.eslint.org/docs/user-guide/getting-started

{
	"workbench.iconTheme": "vscode-icons",
	"workbench.colorTheme": "Atom One Dark",
	"window.zoomLevel": 0,
	"editor.fontSize": 14,
	"editor.tabSize": 2,
	"eslint.validate": [
		"javascript",{
			"language": "react",
			"autoFix": true
		},"html",
		"jsx",
		"js"
	],
	"eslint.options": {
		"extensions": [
			".js",
			".vue",
			".jsx"
		]
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"prettier.singleQuote": true,
	"prettier.useTabs": true,
	"prettier.jsxSingleQuote": true,
	"emmet.triggerExpansionOnTab": true,
	"git.autofetch": true,
}

开发支持

Node
支持node环境：v8.X

npm
包管理工具，可下载所有需要使用的安装包或者配置
官网：https://www.npmjs.com.cn/
可根据项目需求下载配置下载命令：npm install
建议安装国内镜像cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org

git
熟知 git 操作基本命令：

git clone xxx.git 
git add .
git commit -m 'sth.'
git push
git checkout [branchname]

开发使用多分支开发，单分支发布的形式
需求发布上线的时候打上发布tag