大前端进阶
VScode的安装
下载地址我们直接到官网进行下载即可,安装没什么好说的一直下一步即可,最好先汉化一下,插件里面搜索chinese
即可
NodeJS
Nodejs快速安装和了解
安装的话直接到官网无脑下一步即可下载 | Node.js 中文网 (nodejs.cn)
cmd输入node -v
出现版本号 表示安装成功
运行第一条node指令
Nodejs实现HttpServlet服务
1 | // 导入http模块 这里使用require关键字 |
Nodejs操作mysql数据库
首先需要下载mysql的资源npm install mysql
执行之后会发现我们的项目中新增了一个node_modules
文件夹,然后我们就可以使用了
1 | //导入mysql依赖 mysql属于第三方的模块 |
ES6
let和const命令
ES6之前,定义常量和变量都是使用var关键字,let和const的出现是为了解决变量穿透和变量的值可以改变的问题
如果使用let
const则是不能改变变量的值,需要注意的是有些低版本的浏览器不支持let和const语法也就是不支持es6
模板字符串
1 | <script> |
简单来说使用`和${}的方式来拼接字符串,并且他可以识别换行
函数默认参数与箭头函数
默认参数比较好理解,就是声明函数的时候默认给形参赋值
1 | function sum(a=0,b=0){ |
如果不赋默认值那么结果为NAN
箭头函数:
1 | <script> |
对象初始化
1 | <script> |
如果key和变量的名字一致,可以只定义一次,如果value是一个函数可以把:funbction
去掉
对象解构
可以快捷获取对象的属性和行为
1 | <script> |
这样可以快速的获取对象的属性和方法
传播操作符
快速把对象的值赋值给另外一个对象
1 | <script> |
可以看到除了我们取出来的name的值,person的其他的值赋值给了newperson,这个的使用具有特定的场景只有有这个需求的时候才能理解他的作用
Map和Reduce数组
map数组:
1 | <script> |
Reduce数组:
1 | <script> |
计算方式是先算前两个 然后合并成一个值再和后面的值进行计算
总结:这些ES6的语法可以在nodejs、uniapp、微信小程序中使用
NPM包管理器
简介
npm全称Node Package Manager,是NodeJS的包管理工具,里面所有的模块都是开源免费的,也是Node的包管理工具,相当于前端的maven
作用:1.快速构建nodejs工程 2.快速安装和依赖第三方模块 上面用的mysql redis等
构建nodejs工程
只需要输入指令npm init
,然后会让你输入包名版本等按照默认的确定即可(后面加上-y 会生成默认的属性),最后会生成一个package.json
的文件,也可以在这里修改刚才定义的属性
1 | { |
其作用类似于maven项目中的pom.xml
快速安装和依赖第三方模块
安装第三方模块的指令为npm install xxx
或者npm i xxx
参考上面使用的npm install mysql
具体某个版本号在后面加上@即可
安装路径可以看到在项目node_modules下同样在package.json
中可以看到安装的版本,在node中使用只需要require
关键字即可
package.json中的依赖 使用npm install
命令可以直接全部下载
卸载模块nom uninstall vue jquery
Babel
简介
ES6中的有些语法在浏览器或者Node.js中无法执行,Babel是一个广泛使用的转码器可以将ES6的代码转为ES5的代码从而在现有环境使用
安装
安装命令行代码工具
npm install -g babel-cli
查看版本babel --version
使用
创建babel文件夹
初始化项目
npm init -y
创建node文件
1
2
3
4
5
6
7
8
9
10
11let arr=[1,2,3];
const newarr=arr.map(res=>res*2);
console.log(newarr)
``
4. 配置.babelrc,在项目根目录下,改文件用来设置转码规则和插件,基本格式为
```proper
{
"presets":["es2015"],
"plugins": []
}安装转码器,在项目中安装
npm install --save-dev babel-preset-es2015
执行(最好在cmd下)
babel src -d dist
表示把src下所有的node文件都转换到dist目录下
在dist下可以看到确实转换成es5的语法了
自定义脚本
通过上面的执行命令虽然可以运行,但是比较繁琐,还可以通过改写package.json
的方式实现
1 | "scripts": { |
然后执行npm run build
即可运行,原理其实是一样的
模块化
CommentJS规范
先定义一个js,然后把他导出
1 | var sum=(a,b)=>a+b; |
然后像引入第三方模块一样导入即可使用,与面向对象相似了
ES6规范
同样先创建一个js文件使用ES6语法格式
1 | export function getuserlist(){ |
如果上面使用第二种方式应写为
1 | import user from "./userApi"; |
需要注意的是node默认不支持es6的语法 所以需要使用babel进行降级,这里不再重复演示了
Webpack
Webpack是一个前端资源加载、打包工具,他能根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成相应的静态资源,简单来说就是可以将多种静态资源js、css、less转换成一个静态文件,减少页面请求
安装
执行指令npm install -g webpack webpack-cli
安装后查看版本号webpack -v
使用
首先创建一个新的文件夹项目webpack并且src下生成main.js
,common.js
,util.js
并且使用npm init -y
生成一个nodejs项目
util.js我们使用上面的即可
1 | var sum=(a,b)=>a+b; |
common.js
1 | module.exports.info=function(){ |
main.js
1 | const util=require("./util"); |
接着创建一个webpack.config.js
文件配置打包规则
1 | const path=require("path") |
然后执行webpack
就可以得到合并的js文件,并且生成一个html页进行测试得到确实生成为一个js文件了
Webpack合并css文件
Webpack本身只能处理JavaScript模块,如果要处理其他类型的文件,需要使用loader进行转换
css-loader是将css装载到JavaScript ;style-loader是让JavaScript认识css
安装命令npm install --save-dev style-loader css-loader
然后修改webpack.config.js
文件如下
1 | const path=require("path") |
在src下创建一个css文件
1 | body{ |
main.js中加入这个css文件
1 | require("./style.css"); |
package.json
中加入webpack的执行脚本 方便执行
1 | { |
使用npm run dev
即可看到效果,如果打包其他类型的文件需要下载不同的loader文件即可
Vue-element-admin初体验
首先是项目地址,克隆到本地即可git clone https://github.com/PanJiaChen/vue-element-admin.git
然后使用vscode打开此文件夹之后终端输入npm install
即可把所有的依赖下载完毕,启动的话本地npm run dev
然后http://localhost:9527 即可打开,观察源码可以看到上面的知识点大部分都用到了