前言

前面我们在学习Vue的时候都是将Vue的代码直接写在html文件的script中，但实际工作中，我们会使用工具（比如vue-cli）创建完整的项目结构，同时将vue项目托管于nodeJS等JS运行时，实现前端服务的生产化部署。

NodeJS&NPM

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

从NodeJS的官网nodejs.org上下载NodeJS安装包，然后下一步，下一步安装即可。安装完后，在终端中执行node -v验证NodeJS是否安装成功。如下为安装成功的效果。

node

由于在国内访问npm的官方源速度很慢，所以我们要下载内源npm客户端cnpm。

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

或者

npm  install  -g  cnpm  --registry=http://r.cnpmjs.org/

vue-cli是vueJS的脚手架，我们可以用它来创建Vue项目，他帮我们配置好了webpack，节省了你配置webpack的繁琐。

# 全局安装最新版本的@vue-cli
cnpm install @vue-cli -g

验证vue-cli安装成功与否

vue ui

当vue-cli安装成功后，执行以上命令vue3以上版本就会自动打开vue项目管理web页面。

vue项目管理器

我们可以选择在vue项目管理器中创建项目，也可以使用vue-cli命令创建项目。鉴于使用vue项目管理器创建项目于比较简单，我们后续创建项目继续使用vue-cli命令进行演示。

命令

vue create demo3

项目创建过程中需要你选择Vue3，然后静静等待项目创建完成即可。

选择vue3

项目结构

我们选择HbuilderX打开项目（你可以使用任何你喜欢的编辑器），切换到demo3项目根目录，使用npm run serve启动项目。

Vue3项目启动成功

我们使用本地浏览器访问 http://localhost:8081 查看效果。

Vue3项目测试成功

今天，我们就先到这里，下节我们将在此项目结构基础上，将对接FastApi后端演示前后端分离。