Vue3CLI（脚手架）

//1、需要输入一些信息（一路回车）
npm init
//2、全部默认
npm init --yes

node .\index.js    //node (js文件路径)

//命令行临时使用指定镜像(淘宝) 
npm --registry https://registry.npm.taobao.org install express
//命令行永久更改使用指定镜像(淘宝)
npm config set registry https://registry.npm.taobao.org

//安装cnpm 以后下载资源直接采用cnpm替代npm
npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install -g yarn

let user = {
    username:"小明",
    eat(){console.log("I am eat!")}
}
// 解构
let {username} = user
console.log(username)//---小明

// 数组解构
let [a,b,c] = [1,2,3]
let [...d] = [1,2,3,4]
console.log(a)//---1
console.log(d)//---[ 1, 2, 3, 4 ]

export default users;//导出模块
import users from '(文件位置)'//导入模块

let users = {
    username2:'小明',
    password2:'123456',
    login(){
        console.log('登入成功')
    }
}

// 导出
// 默认导出
export default users;//只能有一个默认，默认导出的内容在引用的地方可以随意命名
// 非默认导出
export let z = 'xxx';
export let y = 'xxx';

// 这里使用b.js(node环境运行)
// 导入
import users from "./b.js"
console.log(users)//---{ username2: '小明', password2: '123456', login: [Function: login] }
import xx from "./b.js"//默认导出的内容在引用的地方可以随意命名
console.log(xx)//---{ username2: '小明', password2: '123456', login: [Function: login] }
import {z} from "./b.js"//以解构的方式使用非默认导出
console.log(z)//---xxx
// 同时导入
import users2,{y} from "./b.js"
console.log(users2)//--{ username2: '小明', password2: '123456', login: [Function: login] }
console.log(y)//---xxx

// 一、异步回调中(几乎同时被调用)
setTimeout(()=>{
    console.log("1")
},1000)
setTimeout(()=>{
    console.log("2")
},1000)
setTimeout(()=>{
    console.log("3")
    console.log("---------------------------")
},1000)

// 二、回调中继续调用（代码多后会比较复杂）
setTimeout(()=>{
    console.log("1")
    setTimeout(()=>{
        console.log("2")
        setTimeout(()=>{
            console.log("3")
            console.log("---------------------------")
        },1000)
    },1000)
},1000)

// 三、promise
// 我们需要将一个异步请求包装成一个 promise对象
// resolve(结果),reject（拒绝）将来我们的异步任务如果执行成功就主动调用resolve
// 他可以将传递给resolve的值传递给下一个异步任务
new Promise ((resolve,reject)=>{
    setTimeout(()=>{
        console.log("1")
        resolve("1")
    },1000)
}).then(res =>{
    console.log('传递的参数--'+res)
    return new  Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log(res+"2")
            resolve(res+"2")
        },1000)
    })
}).then(res=>{
    console.log('传递的参数--'+res)
    setTimeout(()=>{
        console.log(res+"3")
    },1000)
}).catch(err =>{
    console.log(err)
})

//npm
npm install -g @vue/cli
//yarn
yarn global add @vue/cli
//测试
vue --version

vue create hello-world
//选择vue3
//选择工具（npm\yarn）

//进入项目
cd hello-world
//启动
yarn server

// main.js会创建根实例
import { createApp } from 'vue'//引入vue 解构出 createApp 方法
import App from './App.vue'
createApp(App).mount('#app')//APP是根组件 并挂载到index.html

<template><!-- 根组件 -->
  <img alt="Vue logo" src="./assets/logo.png"> <!-- 图片 -->
  <HelloWorld msg="Welcome to Your Vue.js App"/><!-- 组件 -->
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'// 引入组件
// 导出
export default {
  name: 'App',
  components: {HelloWorld}
}
</script>

<template>
  <div class="hello">
    <!-- 父子主键的传递消息 -->
    <h1>{{ msg }}</h1>
    <!-- ... -->
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

yarn build

yarn add axios

import axios from 'axios'
axios.get('/xxx').then(res =>{
   console.log(res);
})