2020.7.3:模块js导出与导入、vue-cli 配置
今日学习内容:
# vue
# es6 Module (模块化)
## js 导出

// 默认导出 { default : fn} export default function sum(a, b) { return a + b; } // 具名导出 (普通导出) {double : fn} export function double(a) { return a * 2; } // 直接导出 // { n : 3} export var n = 3; // 最终导出:{ default : fn , double , fn , n : 3 }
## js 导入

//导出 a.js 中的 default //import sum from "./a.js"; // console.log(sum(3, 4)); // 导入指定 // import { double } from "./a.js"; // console.log(double(4)); // 全部导入 // import * as obj from "./a.js"; // console.log(obj); // 直接导入 // import "../justRun.js";
# vue 脚手架搭建

## vue-cli 的安装
1.vue-cli 是一个脚手架工具,它集成了诸多前端技术,包括但不仅限于:
- webpack
- babel (处理兼容性的)
- eslint
- http-proxy-middleware
- typescript
- css pre-processor
- css module
- Linter / Formatter (将你的代码进行风格检查)
- ...
2. 这些工具,他们大部分都要依赖两个东西:
- node: 环境:很多工具的运行环境
- npm: 包管理器,用于下载各种第三方库
目前,npm 已和 node 集成,当安装 node 后,会自动安装 npm
## 安装 node
- 下载 node : https://nodejs.org/zh-cn/
## 验证安装
- 打开终端,查看 node 和 npm 版本,验证是否安装成功
- node -v
- npm -v
如果安装之前打开了终端,需要在安装后关闭终端,重新打开
## 配置源地址
- 默认情况下,npm 安装包是会从国外的地址下载,速度很慢,容易导致安装失败,因此需要先配置 npm 的源地址
- 使用下面的命令更改 npm 的源地址为淘宝源
- npm config set registry http://registry.npm.taobao.org/
- 更改好了之后,查看源地址是否正确的被更改
- npm config get registry
## 安装 vue-cli
- 使用下面的命令安装 vue-cli 工具
- npm install -g @vue/cli
- 安装好之后,检查 vue-cli 是否安装成功
- vue --version
# vue-cli 的使用
## 在终端中进入某个目录
- 选择一个目录,该目录将放置你的工程文件夹
- 在终端中进入该目录
## 搭建工程
- 使用 vue-cli 提供的命令搭建工程
- vue create 工程名
注意:工程名只能出现英文、数字和短横线