Vue CLI 脚手架

==============================================================================

1. node.js环境准备

（1）下载nodejs

http://nodejs.cn/download/

windows系统: .msi 安装包(exe)指定安装位置 .zip(压缩包)直接解压缩指定目录

mac os 系统: .pkg 安装包格式自动配置环境变量 .tar.gz(压缩包)解压缩安装到指定名

（2）配置nodejs环境变量

• 1.windows系统:

计算上右键属性----> 高级属性 ---->环境变量 添加如下配置:

NODE_HOME= nodejs安装目录

PATH = xxxx;%NODE_HOME%

• 2.macos 系统

推荐使用.pkg安装直接配置node环境

（3）验证nodejs环境是否成功

启动cmd窗口

在任意位置 输入命令： node –v

展示node版本即可v14.0.0

（4）npm介绍

• node package mangager nodejs包管理工具 前端主流技术 npm 进行统一管理

• maven 管理java后端依赖 远程仓库(中心仓库) 阿里云镜像

• npm 管理前端系统依赖 远程仓库(中心仓库) 配置淘宝镜像

• npm (node package manager) nodejs包管理工具

在世界范围内维护的中心库，用于管理前端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)项目的包结构

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

@import导入css
9，BFC理解

[外链图片转存中…(img-fdSifnuy-1714155899049)]

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-coMb6qBV-1714155899050)]

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