a) 安装环境：

i. 下载并安装node.js：

1. 下载地址：https://nodejs.org/zh-cn/download/

2. 安装node.js

3. 查看版本

注意：npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

4. 安装cnpm（可选）

由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们也可以使用npm的国内镜像——cnpm（淘宝npm）

npm install -g cnpm --registry=https://registry.npm.taobao.org

ii. 安装vue-cli（脚手架）

1. Vue-cli 2.0和之后版本命令不同，若之前安装过2.0可以先卸载

npm uninstall -g vue-cli

2. 安装vue-cli

npm install –g @vue/cli

3. 查看版本

b) 使用vue create命令创建项目

vue create

i. 切换至指定目录

ii. 创建项目

iii. 配置项目（手动配置）

上下进行选择，回车进行确认

iv. 选择需要的配置项目

配置项说明：

1. ( ) Babel//转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
2. ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
3. ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
4. ( ) Router // vue-router（vue路由）
5. ( ) Vuex // vuex（vue的状态管理模式）
6. ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
7. ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
8. ( ) Unit Testing // 单元测试（unit tests）
9. ( ) E2E Testing // e2e（end to end） 测试

v. 选择Vue版本

vi. 选择ESLint代码校验规则

vii. 选择进行代码校验时机

viii. 选择如何存放配置

In dedicated config files // 独立文件放置

In package.json // 放package.json里

ix. 是否存储当前配置

x. 创建项目

c) 启动项目

i. 切换目录

ii. 运行服务

iii. 访问项目

iv. 终止Vue项目：ctrl+c或关闭命令行窗口

d) 使用vscode打开项目：

i. 项目结构如下：

ii. 项目结构说明：

1. node_modules：用于存放项目中各种依赖包

2. public：用于存放静态资源

a) index.html：生成项目的入口文件

3. src：Vue的源代码文件

a) assets：用于存放着各种静态文件，比如图片

b) components：应用程序的组件

c) App.vue：应用程序根组件

d) main.js：入口文件，主要作用是初始化 vue 实例

4. 其他：配置文件

a) eslintrc.js: eslint代码检查的相关配置放到这里。

b) .gitignore：配置git上传想要忽略的文件格式。

c) babel.config.js：是一个工具链，主要用于在当前和较旧的浏览器或环境中将ES6的代码转换向后兼容（低版本ES）。

d) package.json：模块基本信息项目开发所需要的模块，版本，项目名称

e) package-lock.json：是在npm install时候生成的一份文件，用于记录当前状态下实际安装的各个npm package的具体来源和版本号

5. public文件目录和src/assets目录区别

a) public一般不用动，在vue-cli在进行build的时候，public下面的文件会原封不动地添加到dist中，不会被合并、压缩；不会被webpack打包工具所处理。

b) src/assets目录，build之后，assets目录中的文件，会被合并到一个文件中，然后进行压缩。多用来存放业务级的js、css等。

e) 在VS Code中运行项目

i. 打开终端：“终端”菜单——》“新终端”

ii. 输入命令即可

iii. 若不记得命令，可以在README.md中查看

f) 编辑第一个Hello World项目

i. 新建MyHelloWorld.vue文件

ii. 编辑MyHelloWorld组件

iii. 修改App.vue

iv. 运行项目

朋友，如果能帮到你，记得点赞+关注噢