Vue3CLI（脚手架）

注意：在学习之前需要了解一下node.js和ES6的语法，所以需要本文写了node.js中的npm和ES6的模块化

一、node.js（npm）

node.js：简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。与平时写的js语法基本一样，多了操作计算机资源的语法。这里我们需要使用到npm工具所以需要node.js。

1、安装

在官网下载（安装非常简单（无限下一步即可））

安装时node.js时会自动帮我们安装npm工具

下载 | Node.js 中文网 (nodejs.cn)

2、创建初始化管理配置文件：package.json

代码语言：javascript复制

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

3、运行js文件

代码语言：javascript复制

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

4、npm（cnpm）与yarn

npm：是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。直接使用npm下载资源会在国外的镜像下载（下载慢）。所以需要一些配置。

方法一、使用配置：

代码语言：javascript复制

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

方法二、使用cnpm：

代码语言：javascript复制

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

方法三、使用yarn（推荐：启动、下载都比较快）

代码语言：javascript复制

npm install -g yarn

5、常用npm和yarn命名

	npm	yarm
初始化	npm init	yarn init
默认安装依赖	npm Install	yarn Install
安装某个依赖并保存	npm install xx-save	yarn add xx
安装全局依赖	npm Install g xx	yarn global add xx
移除依赖	npm uninstall xx-save	yarn remove xx
更新依赖	npm update	yarn upgrade xx
运行指令	npm run	yarn run

二、ES6语法

注意：使用node.js运行

1、解构

代码语言：javascript复制

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 ]

2、模块化

设置模块化工程package.json中添加"type": "module"

代码语言：javascript复制

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

b.js (导出)

代码语言：javascript复制

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

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

a.js（导入b.js）

代码语言：javascript复制

// 这里使用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

3、promise

解决异步调用中回调地狱问题

代码语言：javascript复制

// 一、异步回调中(几乎同时被调用)
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)
})

三、Vue3CLI(脚手架)

1、安装

代码语言：javascript复制

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

2、创建项目

代码语言：javascript复制

vue create hello-world
//选择vue3
//选择工具（npmyarn）

3、启动项目（yarn工具）

代码语言：javascript复制

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

访问其告诉我们的地址出现以下界面表示创建成功

4、目录结构

public
favicon.ico（页面图标）
index.html（html文件）
src （源代码）
components（组件）
APP.vue（根组件）
main.js（程序的入口）

5、解析

main.js(入口文件)

代码语言：javascript复制

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

APP.vue（根组件）

代码语言：javascript复制

<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>

HelloWorld.vue（组件）

代码语言：javascript复制

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

5、打包

将vue文件通过node.js编译为html css js文件（会帮我们压缩）

打包结果出现在（dist）只有一个index.html（单页应用）

代码语言：javascript复制

yarn build

6、引用组件（axios为例）

1、使用npm或者yarn工具下载

代码语言：javascript复制

yarn add axios

2、引入

代码语言：javascript复制

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

npm console 工具异步语法

0 人点赞