1、前期环境准备

• 安装Node.js

1、官网下载地址：https://nodejs.org/zh-cn/，选择14.17.3 长期支持版。

2、下载并安装node.js，npm会自动被安装。

//安装完node.js，打开cmd命令窗口，执行命令：
	node -v    //查看node版本
	npm -v    //查看npm版本

• 设置npm镜像源

//在命令行窗口中输入命令，然后等待
npm config set registry https://registry.npm.taobao.org 
//完成后，查看镜像源地址,是否设置成功
 npm get registry

• 安装vue-cli，用vue-cli构建vue项目

官网地址：https://cli.vuejs.org/zh/

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

//在命令行窗口中输入命令，然后等待
npm install -g @vue/cli

//检查其版本是否正确：
vue --version

2、用vue-cli构建vue项目

//在命令行窗口中输入命令,然后【回车】创建项目.。
//hello-world：项目名
vue create hello-world

//耐心等待，然后选择Vue 2版本，再回车等待依赖下载完成。
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

3、项目结构

public 目录：index.html 首页入口文件

src 目录: 存放项目源码及需要引用的资源文件。

assets 目录：存放静态资源目录。如：css、js、图片等

componets 目录：存放公共组件

app.vue 文件：组件展示主界面

main.js 文件：项目核心配置文件。包含视图模型创建，关联视图层、注册组件等功能

package.json 文件：用于 node_modules资源配置、启动、打包项目的 npm 命令管理。

在package.json文件找到以下配置：

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

}

serve 命令：启动项目

build：命令打包项目，部署到生产环境

"dependencies": {

"core-js": "^3.6.5",

"vue": "^2.6.11"

}

dependencies：依赖管理

所有已安装依赖，都会在这显示

4、启动项目

//启动项目，运行命令：

npm run serve

//打包项目，部署到生产环境

npm run build

DONE  Compiled successfully in 4195ms                                6:00:31 PM

  App running at:

  - Local:   http://localhost:8080/

  - Network: http://192.168.43.27:8080/

  Note that the development build is not optimized.

  To create a production build, run npm run build.

命令行启动完成，显示这些信息，至此项目搭建成功。访问 http://localhost:8080/ 可以看到效果。

后续功能持续完善，待续。。。