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

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

3、运行js文件

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

4、npm(cnpm)与yarn

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

方法一、使用配置:

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

方法二、使用cnpm:

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

方法三、使用yarn(推荐:启动、下载都比较快)

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、解构

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"

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

b.js  (导出)

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

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

a.js(导入b.js)

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

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

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

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

2、创建项目

vue create hello-world
//选择vue3
//选择工具(npm\yarn)

3、启动项目(yarn工具)

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

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

Vue3CLI(脚手架)_第1张图片

 4、目录结构

  • public

  • favicon.ico(页面图标)
  • index.html(html文件)
  • src (源代码)

  • components(组件)
  • APP.vue(根组件)
  • main.js(程序的入口)

5、解析

main.js(入口文件)

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

APP.vue(根组件)



HelloWorld.vue(组件)


5、打包

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

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

yarn build

6、引用组件(axios为例)

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

yarn add axios

2、引入

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

你可能感兴趣的