Archives
Linux
Mysql
MongoB
MQ
FastDFS
Redis
ES
Docker
K8s
架构师
开源项目
工具
生活
说说
友链
弹吉他的兔子

飞天班第14节：大前端进阶VUE之路1

2020/03/28

1、Nodejs

使用VsCode工具，官网下载：https://code.visualstudio.com/

安装后，下载以下插件，重启中文生效

什么是Nodejs?

以前我们编写js代码需要放在html中，通过浏览器访问运行。浏览器解析网页的三大要素：html（结构）、css（表现）、JavaScript（行为），核心分为两部分：

  • 渲染引擎，渲染html和css
  • JavaScript引擎

Nodejs，基于Chrome的V8引擎开发，能使js代码在服务端运行的运行时环境，可以脱离浏览器运行js代码。就像php、java的servlet可以用来开发动态网页，nodejs使用javascript来开发，它可以使用配套的npm包管理下载数据库连接，redis连接的相关包，进行数据库的CRUD操作，那样就不需要后端配合了，只不过我们一般不使用这个功能，它只适合简单项目。

nodejs从官网下载，无脑安装即可。

安装完毕后，可以看到node和npm环境。

# 查看版本号
node -v
npm -v

npm相当于java的maven，前端依赖包管理下载，也类似于yum安装

 # 在前端项目文件夹进入终端执行install
 # 默认安装最新版
 npm install vue
 # 指定版本
 npm install vue@2.1.1

vue前端项目开发环境准备：

  • Vscode
  • Node

运行js代码

编写js文件test.js：

console.log('hello world')
let name = 'hello',age = 3
// 使用模版字符串,字符串的引号需要改为 ``
let infoes6 = `name: ${name} age: ${age}`;
console.log(infoes6)

终端运行js文件

node test.js

2、ES6语法详解

ES6是javascript的一代标准，在2015年发布的(别名ES2015)，只是现在很多浏览器还未支持ES6语法，所以我们发布前端项目需要借助babel将代码里的ES6语法转为ES5语法。

let声明变量

//1.var 声明变量没有作用域，它是全局的
//	let 声明变量是有作用域的。
{
	var a =0  
	let b = 1	
}
console.log(a)	// 0
console.log(b)	// b is not defined

//2.var 可以声明多次
//	let 只能声明一次
var m =1  
var m = 2
let n = 3  
let n = 4 // Identifier 'n' has already been declared

//3.var 会提升变量的作用域
//  let不能
console.log(x) // undefined
var x = 0
console.log(y)
var y = 1 // ReferenceError: y is not defined

const常量

// 声明了常量就不允许改变，且必须初始化
const PI = 3.14159
PI = 0  // TypeError: Assignment to constant variable.
const APP // SyntaxError: Missing initializer in const declaration

结构赋值

let [x,y,z] = [1,2,3]
console.log(x,y,z)

let user = {name: 'zhangshan',age: 3 }
// 传统赋值
let name1 = user.name
let age1 = user.age
console.log(name1,age1)
// es6赋值
let {name,age} = user // 结构的变量名必须与对象的属性名一样，否则取不到至
console.log(name,age)

模版字符串

let name = 'hello',age = 3
// 字符串的引号需要改为 ``
let infoes6 = `name: ${name} age: ${age}`;
console.log(infoes6)

对象声明简写

let name = 'hello',age = 3
// 传统声明对象
let user1 = {name: name,age: age}
console.log(user1)
// es6对象声明简写
let user2 = {name,age}
console.log(user2)

定义方法简写

//  传统的写法
const person1 = {
  sayhi: function(){
    console.log('hi 1')
  }
}
person1.sayhi()
// es6的写法，参考了java的方法定义
const person2 = {
  sayhi(){
    console.log('hi 2')
  }
}
person2.sayhi()

对象拷贝

let person ={name: 'coding',age: 3}
let someoneOld = person // 引用赋值
let someoneNew = {...person}  // 对象拷贝
someoneOld.name = 'kuangshen'
someoneNew.name = 'kuangshen new'
console.log(person)   // { name: 'kuangshen', age: 3 }
console.log(someoneOld) // { name: 'kuangshen', age: 3 }
console.log(someoneNew) // { name: 'kuangshen new', age: 3 }

方法的默认参数

function showInfo(name,age =3){
  console.log(name,age)
}

showInfo('jude',18) // age = 18
showInfo('jude')  // age = 3
showInfo('jude',undefined)  // age = 3
showInfo('jude',null) // age = null

箭头函数

语法：参数 => {}a

java的lambda表达式： ()->{}

let arr = ['10','5','40','25','100']
  let arr2 = arr.sort((a,b) => a - b)
  console.log(arr2)

  // 演变
  let f1 = function(a,b){
    return a + b
  }
  // 简化:去掉关键字function
  let f2 = (a,b) => {return a + b}
  console.log(f2(2,3))
  // 再简化：去掉关键字return和{}
  let f3 = (a,b) => a + b
  console.log(f3(2,3))

// find
let partnerList =[{name: 'jude',id: 1},{name: 'david',id: 2},{name: 'tanli',id: 3,age: 10}]
let partner = partnerList.find(item => item.id === 2)
console.log(partner)	// { name: 'david', id: 2 }
// map
let ids = partnerList.map(item => item.id)
console.log(ids) // [ 1, 2, 3 ]
// filter
let partner2 = partnerList.filter(item => item.age < 12).map(item => item.name)
console.log(partner2) // [ 'jude', 'tanli' ]

判断字符串开头结尾

  • startsWith

    第一个参数，要在此字符串开头搜索的字符，第二个参数是指定从字符串开始的位置，默认从零开始。区分大小写

  • endsWith

    区分大小写

let str1 = "file:///C:/Users/iTAze/Desktop/1.html";
let str2 = "https://mp.csdn.net/postedit.jpg";
console.log(str1.startsWith("https://"))// false;
console.log(str1.startsWith("file:///"))// true;
console.log(str2.endsWith(".png"))// false;
console.log(str2.endsWith(".jpg"))// true;

3、NPM包管理

什么是npm

Npm 的全称是Node Package Manager，随同nodejs一起安装的包管理和分发工具，已经成为非官方的发布Node模块(包)的标准，就好比maven,所有东西只要导入依赖即可，npm也是如此，npm install ，好比Linux的yum安装

理解npm如何管理前端依赖

# 终端执行init,初始化项目
npm init
# 或者
npm init -y
# 查看npm配置
npm config list
# 修改npm镜像
npm config set registry https://registry.npm.taobao.org/
# 也可以安装nrm管理npm的镜像源
npm install -g nrm
nrm -h
nrm ls	# 查看可切换的镜像源
nrm use taobao # 修改npm镜像为taobao

执行npm init后在项目文件夹下，会生成一个package.json文件

下载依赖包

1、npm install vue 安装最新版本的vue

2、npm isntall vue@xxx 指定版本安装

3、npm install xxx后，package.json中的dependencies下显示了所有依赖包的版本，如同pom.xml，package.json就是管理依赖的。

注意：

当我们查看package.json中已安装的库的时候，会发现他们的版本号之前都会加一个符号，有的是插入符号（^），有的是波浪符号（~）。那么他们到底有什么区别呢

"dependencies": {
"bluebird": "^3.3.4",
"body-parser": "~1.15.2"
}
bluebird的版本号：^3.3.4
body-parse的版本号：~1.15.2
  • 波浪符号（~）：他会更新到当前minor version（也就是中间的那位数字）中最新的版本。放到我们的例子中就是：body-parser:~1.15.2，这个库会去匹配更新到1.15.x的最新版本，如果出了一个新的版本为1.16.0，则不会自动升级。波浪符号是曾经npm安装时候的默认符号，现在已经变为了插入符号。
  • 插入符号（^）：这个符号就显得非常的灵活了，他将会把当前库的版本更新到当前major version（也就是第一位数字）中最新的版本。放到我们的例子中就是：bluebird:^3.3.4，这个库会去匹配3.x.x中最新的版本，但是他不会自动更新到4.0.0。

所以

~1.15.2 :=  >=1.15.2 <1.16.0   
^3.3.4 := >=3.3.4 <4.0.0

这里再说一下版本version的命名规范：比如版本1.15.2

1.15.2对应就是MAJOR,MINOR.PATCH：1是marjor version；15是minor version；2是patch version。

MAJOR：这个版本号变化了表示有了一个不可以和上个版本兼容的大更改。

MINOR：这个版本号变化了表示有了增加了新的功能，并且可以向后兼容。

PATCH：这个版本号变化了表示修复了bug，并且可以向后兼容。

当我们运行‘npm instal –save xxx’命令，就会去更新对应的依赖包

前端和后端的命名规范是一样的。

4、npm install –save-dev xxx 或者npm install -D xxx ，指定只在开发的时候使用该依赖包，打包发布不包含该依赖。

5、npm uninstall xxx 卸载对应的依赖包

6、npm update xxx 更新包

7、npm install -g xxx 全局安装依赖包，依赖包不是放在当前项目的node_modules下，而是放在nodejs的node_modules下，做全局使用。

npm install jquery
npm install vue
npm install -D eslint

npm install后，会产生一个package-lock.json文件和一个node_modules文件夹。

package-lock.json文件的作用是锁定依赖包的版本和来源仓库位置

node_modules文件夹里是你install的依赖包文件

4、Babel详解

Babel 是一个广泛的转码器，可以将ES6代码转换为ES5的代码，因为浏览器不支持ES6的高级语法。

# 全局安装babel
npm install -g babel-cli
babel --version

使用测试

  1. src目录新建一个example.js文件
let input = [1,2,3]
input = input.map(item => item + 1)
console.log(input)
  1. 根目录下新建一个.babelrc
{
  "presets": ["es2015"],
  "plugins": []
}

  1. 安装babel依赖
npm install -D babel-preset-es2015
  1. 输出测试

根目录下新建一个dist目录，执行下面的命令

babel src/example.js --out-file dist/index.js

我的是在mac电脑上执行的，在windows上执行也要注意权限问题

可以看到index.js的js代码变成了ES5语法

package.json下配置脚本

"scripts": {
    "build": "babel src/example.js --out-file dist/index.js"
  },

配置了脚本后，可以通过npm run 脚本命令执行。

npm run dev

npm run build

npm run start

本质就是一段脚步，可以在package.json的scripts找到对应的脚步

5、模块化开发

js也可以模块化开发，有两种模块化规范

  • CommonJS规范
  • ES6模块化规范

CommonJS规范

例子：

src目录下新建export-common.js文件

const sum = function(a,b){
  return a+b
}

const sub = function(a,b){
  return a-b
}

// 导出这些方法供他人使用
// module.exports = {
//   sum: sum,
//   sub: sub
// }
// 名称相同可以简写
module.exports = {
  sum,
  sub
}

新建test.js文件require 引入使用

const m = require('./export-common.js')
console.log(m)

// 测试方法，正常使用
console.log(m.sum(1,2))
console.log(m.sub(2,1))

ES6模块化规范

例子

scr目录下新建export-es6.js文件

export function list(){
  console.log('获取用户列表')
}

export function save(){
  console.log('保存用户信息')
}

新建test.js文件import引入使用

import {list,save} from './export-es6'
list()
save()

我们用node执行一下

node test.js

会报错，因为nodejs并未支持ES6的import语法，需要通过babel降为ES5的语法

# src目录下的文件转义输出到dist目录下
babel src -d dist

执行

第二种写法

export-es6.js文件

export default{
  list() {
    console.log('获取用户列表')
  },
  save() {
    console.log('保存用户信息')
  }
}

test.js文件

import user from './export-es6'
user.list()
user.save()

6、Webpack详解

初探

webpack是一个前端的资源、打包工具

# 全局安装
npm install -g webpack webpack-cli
# 安装成功后,查看版本
webpack -v
# 查看node_modules的全局目录
npm root -g

例子：

重新初始化一个项目，使用ES5的语法在src目录下新建（减少了babel将ES6降为ES5的操作）

common.js文件

exports.info = function(str){
  document.write(str)
}

utils.js文件

exports.add = function(a,b){
  return a+b 
}

main.js文件

const common = require('./common')
const utils = require('./utils')

common.info('hello world!' + utils.add(100,200))

根目录下创建webpack.config.js文件

const path = require('path')  // nodejs的内置模块
module.exports = {
  entry: './src/main.js',    // 程序的入口配置文件
  output: {
    path: path.resolve(__dirname,'./dist'),  // 输出路径，当前目录下的dist文件夹
    filename: 'bundle.js '
  }
}

项目目录下执行命令

webpack --mode=development

虽然我已经全局安装了webpack,但还是提示我们没安装

按照提示安装依赖到开发环境后，还是提示我没安装。

卸载webpack，降低版本到3.6.0安装试试

sudo npm uninstall -g webpack webpack-cli
sudo npm  install  webpack@3.6.0 -g  --unsafe-perm

再执行webpack –mode=development，发现webpack3.6版本不支持mode参数

全部卸载，怀疑node版本太低，与webpack版本不对应，安装最新nodejs v12.6.1。

问题解决

bundle.js 是webpack打包后生成的文件，可以防止别人窥探源码。

使用bundle.js

根目录下新建index.html,引入bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
<script src="./dist/bundle.js "></script>
</html>

Open with live sever在浏览器访问index.html

但会报MIME的错误，bundle.js加载失败,还不知道如何解决

添加规则打包css文件

安装css打包插件

npm install -D style-loader css-loader

配置webpack.config.js

const path = require('path')  // nodejs的内置模块
module.exports = {
  entry: './src/main.js',   // 程序的入口配置文件
  output: {
    path: path.resolve(__dirname,'./dist'),  // 输出路径，当前目录下的dist文件夹
    filename: 'bundle.js ',
    publicPath: '/'
  },
  module: {
    rules:[
      {
        test: /\.css$/,   // 打包规则映射到.css结尾的文件上
        use: ['style-loader','css-loader']
      }
    ]
  }
}

src目录下新建style.css文件测试一下

body {
  background-color: blueviolet;
}

main.js引入sytle.css

require('./style.css')
const common = require('./common.js')
const utils = require('./utils.js')

common.info('hello world!' + utils.add(100,200))

重新打包

webpack --mode=development

可以看到style.css打包进去了。

webpack完整配置参考

完整配置参考 https://www.jianshu.com/p/e8289dec6aca

关于webpack原理参考文章了解更多：https://juejin.im/post/5cc3ba64e51d45789161d0bd

7、vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

官网：https://panjiachen.github.io/vue-element-admin-site/zh/

Post Directory