前端笔记1.1 项目构建

最新推荐文章于 2024-04-30 23:00:09 发布

lagoon_lala

最新推荐文章于 2024-04-30 23:00:09 发布

阅读量1.4w

点赞数

分类专栏：前端文章标签：前端项目构建

本文链接：https://blog.csdn.net/lagoon_lala/article/details/82928089

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

上次课程回顾

HTML/CSS/JS

querySelector、querySelectorAll

createElement、appendChild、removeChild

Atom开发工具

级联菜单作业：

<!DOCTYPE html>

<head>

<title>Document</title>

// 准备数组，来作为省份的初始化数据

var allArea = ["北京","河北","山东"];

var allAreaplus = [["顺义","朝阳","海淀"],["石家庄","保定","唐山"],["济南","青岛","日照"]];

function initArea() {

// 取得下拉列表

var area = document.querySelector("#area");

for (var i = 0;i < allArea.length;i++) {

var option = document.createElement("option");

option.value = i+1;

option.innerText = allArea[i];

area.appendChild(option);

}

function changeAreaplus(areaid) {

var areaplus = document.querySelector("#areaplus");

// 每次切换省份时，需要把城市下拉列表清空

areaplus.length = 1;

for (var i = 0;i < allAreaplus[areaid-1].length;i++) {

var option = document.createElement("option");

option.value = i+1;

option.innerText = allAreaplus[areaid-1][i];

areaplus.appendChild(option);

}

</script>

</head>

省份：

<option value="0">-请选择省份-</option>

</select>

城市/区域：

<option value="0">-请选择城市-</option>

</select>

</body>

</html>

2、本次课程内容

2.1、前端项目构建

为了能够保证前端项目安全的实施，一般会将前端的项目单独通过nodejs进行项目构建。

这里必须先安装一个nodejs的开发环境。

https://nodejs.org/zh-cn/download/

可以从上面的地址根据自己的操作系统进行环境的下载

安装后，打开命令行，输入npm查看是否能够显示对应的命令。

然后需要对象项目目录结构进行定义。

准备一个文件夹作为项目的根目录。

在企业开发中，建议构建的结构为：

app：开发的前端代码

css：样式代码

js：javascript代码

views：页面的HTML模板代码，这里使用基于express的模板，因此扩展名为ejs

server：构建的服务器代码（一般都自动生成），通过express生成

tasks：自动构建脚本

为了能够自动生成server下的内容，我们需要先安装express的nodejs扩展库。

安装的命令就是 npm install express -g（mac下建议加入一个sudo提升权限）

还需要按章一个npm install -g express-generator 来让命令行能够支持express命令

确认express命令可以用后，通过命令行进入到server文件夹下，执行

express -e .

在server目录下生成标准的服务器结构。

之后开始完成自动构建的操作。

这里自动构建使用了nodejs的另一个扩展库：gulp

所有的自动生成的操作，都是基于这个库完成的，当然还用到了一些其它的库。

在项目根目录下拷贝一个gulpfile.babel.js文件，作为项目的构建启动目录。

再拷贝一个.babelrc文件到根目录。

在命令行中进行服务器的初始化安装，找到server目录，执行npm install

在项目根目录下，执行 npm init，进行导入库的初始化。

拷贝tasks下的所有js文件。

然后需要安装这个tasks任务支持的扩展js库，还是通过npm install命令来安装

npm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util yargs gulp-live-server del babel-loader@7.1.5 babel-core babel-preset-env require-dir babel-preset-es2015 connect-livereload gulp-sequence --save-dev

修改服务器的app.js文件

加入一行内容

app.use(require("connect-livereload")());

还需要用npm命令安装一个gulp客户端，以便用gulp命令可以启动服务器。

npm install gulp -g

以上都完成后，理论上就可以使用服务器了。

通过gulp --watch命令，即可启动服务器，默认端口为3000