Vue CLI 脚手架

在世界范围内维护的中心库，用于管理前端js文件

• 命令基本使用

npm install axios 通过网络从中心库下载axios 没有版本时默认下载最新版本

npm install axios@x.x.x 通过网络从中心库下载axios指定版本

（5）配置淘宝镜像

npm config set registry https://registry.npm.taobao.org

• 查看淘宝镜像是否安装成功

npm config get registry

（7）配置npm下载依赖位置

#windows:

#1.设置缓存位置

npm config set cache “D:\noderepository\npm-cache”

#2.设置

npm config set prefix “D:\noderepository\npm_global”

#mac os:

npm config set cache “/Users/chenyannan/dev/nodereps”

npm config set prefix “/Users/chenyannan/dev/nodereps”

（8）验证nodejs环境配置

npm config ls

2.安装脚手架

(1)卸载脚手架

npm uninstall -g @vue/cli //卸载3.x版本脚手架

npm uninstall -g vue-cli //卸载2.x版本脚手架

(2)Vue Cli官方网站

https://cli.vuejs.org/zh/guide/

(3)安装vue Cli

npm install -g vue-cli

• 输入 vue init

(2)配置nodejs本地仓库环境变量

path=…;D:\noderepository\npm_global

目的：便于后续使用vue cli相关命令

(3)测试命令能否执行

窗口中输入命令 ：vue init

显示如上界面即可

3.第一个vue脚手架项目

(1) 创建vue脚手架第一个项目

• vue init webpack 项目名

(2)创建第一个项目

• 下载失败提示

• 下载成功后

hello ------------->项目名

-build ------------->用来使用webpack打包使用build依赖 构建一些依赖文件

-config ------------->用来做整个项目配置目录 主要用来对 开发 测试 环境进行配置

-node_modules ------>用来管理项目中使用依赖

-src ------>用来书写vue的源代码[重点]

+assets ------>用来存放静态资源 [重点]

components ------>用来书写Vue组件 [重点]

router ------>用来配置项目中路由[重点]

App.vue ------>项目中根组件[重点]

main.js ------>项目中主入口[重点]

-static ------>其它静态

-.babelrc ------> 将es6语法转为es5运行

-.editorconfig ------> 项目编辑配置

-.gitignore ------> git版本控制忽略文件

-.postcssrc.js ------> 源码相关js

-index.html ------> 项目主页

-package.json ------> 类似与pom.xml 依赖管理 jquery 不建议手动修改

-package-lock.json ----> 对package.json加锁

-README.md ----> 项目说明文件

• 下载成功后

• 文件显示

(3)如何运行在项目的根目录中执行

a、 切换到创建项目的根目录

b、 在项目根目录中执行命令 npm run dev

(4)如何访问项目

• http://localhost:8080

(5)项目的包结构

• 传文件时这两个文件可以删除./当前目录

(5)Vue Cli中项目开发方式

• 注意: 一切皆组件 一个组件中 js代码 html代码 css样式

1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统

2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件

4.如何开发Vue脚手架

注意:在Vue cli 中一切皆组件

5、案例

• components中（组件中）

{{msg}}

这是我女朋友杨福君！

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】