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

## 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";
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 工程名

        注意:工程名只能出现英文、数字和短横线
vue 脚手架搭建

 

 
 
 
posted @ 2020-07-03 15:52  青山绿水ccc  阅读(234)  评论(0)    收藏  举报