vue准备阶段

1.准备开发软件及环境
VsCode
1、下载软件 https://code.visualstudio.com/
2、无脑安装即可！一直下一步！ 英文界面！
3、安装中文插件！
4.重启
NodeJs
安装nodejs之前需要先安装一下python！ 安装nodejs，无脑下一步即可！自动把你配置环境变量
基本使用
1、创建文件夹 nodejs
2、创建我们的 01-控制台程序.js

console.log("hello,node");

3、打开终端
4、运行js程序
node 的服务器端开发（了解即可！）
02-server-app.js

const http = require('http')
http.createServer(function (request, response) {  
  response.writeHead(200, { 'Content-Type': 'text/plain' })  
  response.end('hello,node server') 
}).listen(8080)
console.log("Server running at http://localhost:8080")

ES6语法详解

大部分现在的前端程序员，都会使用es6进行开发！浏览器一般都是只支持es5语法！ 什么是 ES6 呢？ 一个规范而已！ JavaScript的下一代标准！
ECMAScript，在IDEA中默认配置ECMAScript5版本，我们要编写es6的语法，需要配置

//let语法
// // var 声明的变量没有作用域
// // let 声明的变量是有作用域!
{
    var a = 0
    let b = 1 
}
console.log(a)//0
console.log(b)//b is not defined

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

// var 会提升变量的作用域 
// let 不存在变量提升
console.log(x) // undefined 
var x = 'apple'
console.log(y) // Cannot access 'y' before initialization 
let y = 'banana'

//常量
//常量定义 就改编不了
const P = 0
const p = 1
console.log(P)//0

const P 
console.log(P)//疯狂报错

赋值

//传统
 let a = 1, b = 2, c = 3
console.log(a, b, c) 
//es6
let [x, y, z] = [1, 2, 3] 
 console.log(x, y, z)
 //对象定义
let user = {
    name: '张三', age: 18
}
let{name,age}=user
console.log(name)

模板字符串

let name = "hello"
let age = 18
//let info = 'name:' + name + '=age:' + age;// 拼接字符串
//console.log(info)
// 字符串引号需要改为 ``
let infoes6 = `name: ${name} age: ${age}`// 模板字符串，真正的前端开发

console.log(infoes6)

对象声明简写

//传统
const age = 3
const name = 'sy'
const person = {age: age,name: name}
console.log(person)
//es6
const person = {age,name}
console.log(person)

定义方法简写

const person = {
  say: function (){
        console.log('hello dear')
    }
}
person.say();
//es6
const person = {
    say(){
        console.log('hello dear')
    }
}
person.say();

对象拓展运算符

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

默认参数

function showInfo(name, age = 3) {  
    console.log(name + ',' + age) 
}
//showInfo('sy',4)
showInfo()

箭头函数

// var f1 = function (a, b) {
 //   let result = a + b 
 //   return result 
 // }
// var f2 = (a, b) => { 
//   let result = a + b 
//   return result 
// }
// var f3 = (a, b) => a * b
// console.log(f3(2, 3));

let arr = ["10", "5", "40", "25", "1000"] 
let arr1 = arr.sort() //单独打印 不排序
let arr2 = arr.sort((a, b) => a - b) 
console.log(arr1)
//console.log(arr2)

NPM包管理

类似maven
1、建立一个npm包
2、测试初始化项目，理解npm如何管理前端依赖

npm init 
npm init -y # 直接生成默认的值

修改镜像

npm config list   # 查看npm的配置信息
# 经过以下配置，就可以让所有的依赖下载通过 淘宝的镜像，这样会比较快
npm config set registry https://registry.npm.taobao.org/ 

npm install xxx
下载依赖包！
1、npm install vue 安装指定依赖，默认是最新版本
2、npm install vue@x.x.x 指定版本安装！
3、package.json 中管理了所有依赖版本控制，就如同 pom.xml
4、指定只在开发的时候使用 npm install --save-dev (等价-D) eslint

5、全局安装环境安装！ npm install -g webpack


6、其他命令

npm update jquery  # 更新包 
npm uninstall jquery  # 卸载包

Babel

很多se6高级语法，浏览器是不支持的， Nodejs也不一定能运行！
转码器
Babel 是一个广泛的转码器！可以将 ES6代码转换为 ES5的代码！ 语法会自动转换！
1.安装

npm install -g babel-cli # 安装babel-cli
babel --version # 版本测试 
6.26.0 (babel-core 6.26.3)

2、如何使用？
-在 src 在编写js源代码

-编写.babelrc 配置文件

{
     "presets": [
        "es2015"
     ],  
     "plugins": []  
}

-安装babel依赖

npm install -D babel-preset-es2015

-输出测试

babel .\src\example.js --out-file .\dist1\dist.js

可以自定义脚本！（手输路径麻烦）
npm run build脚本命令

npm run test
npm run dev
npm run start
本质就是一段脚本，以后看到类似的启动方式，就可以去找它的 scripts 脚本

模块化

js 是否也可以模块化开发呢？
class 、 package 、moudle!
产生了两种模块化规范：
CommonJS 规范！

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

//导出这些方法
module.exports={
sum,
sub
}

const m = require('./运算.js')
console.log(m)
const r1 = m.sum(1,3)
console.log(r1)

node .\测试.js
ES6模块化规范！

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

// import node不支持 
import { getList, save } from './userApi.js'
 getList() 
 save()

导入多个方法

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

//user名随便起
import user from './userApi2.js'
user.getList() 
user.save()

node 不支持 es6 模块化语法，需要babel转义src所有目录下

webpack

main

const common = require('./common.js')
const util = require('./util.js')

common.info("hello world"+ util.add(1,2))

webpack.config.js

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

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "webpack --mode=development"   //npm run dev就可以
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

最后

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./dist/bundle.js"></script>
</body>

</html>

webpack完整配置百度

打包出现

webpack not installed

Install webpack to start bundling:
$ npm install --save-dev webpack

卸载再安装

npm uninstall webpack -g
npm install webpack webpack-cli webpack-dev-server -g

初始化了一下：npm init -y

再次打包webpack --mode=development