x Vue工程化项目搭建

1.Node.js环境搭建

我以gnvm为例进行windows系统的环境搭建，安装和使用参照官网地址：http://ksria.com/gnvm/?lang=zh-cn，mac系统可以去官网下载pkg包进行安装。

（1）下载并解压缩 gnvm.exe 保存到D:/Programs/nodejs，并将此文件夹加入到环境变量 Path。

（2）在cmd（我用的是第三方工具cmder）中输入gnvm version 查看版本号，看到版本信息，说明配置成功

（3）输入 gnvm config registry TAOBAO 更换淘宝源
（4）输入 gnvm config 查看配置，确认registry已换为淘宝源

（5）使用 gnvm search 15.*.* 查看该版本序列中Node.js与npm的版本对应关系。我决定安装15.8.0的Node.js，那么我需要安装7.5.1的npm。

（6）使用 gnvm npm 7.5.1 安装npm，安装完成后使用 npm -version 可以查看版本号是否正确

（7）使用 npm config get registry 查看npm的源

（8）使用 npm config set registry https://registry.npmmirror.com 更换淘宝源

（9）使用 gnvm install 15.8.0 安装Node.js

（10）使用 gnvm use 15.8.0，将Node.js的版本切换至15.8.0

（11）使用 gnvm ls ，查看本地的全部Node.js版本

（12）使用 node --version 验证Node.js是否搭建完成

2.使用Vue CLI搭建项目

官方网址：https://cli.vuejs.org/

（1）使用 npm install -g @vue/cli 安装Vue CLI工具

（2）使用 vue --version 查看Vue CLI工具的版本，能看到版本信息说明工具安装完成。

（3）进入项目要存放的目录，使用 vue create clidemo1 创建项目

用键盘上下键选择手动配置项目
用空格键选中需要的配置
选择3.x版本
不用history模式配置路由
选择sass作为CSS预处理
ESLint选择默认
选择保存时进行代码校验
选择使用单独的配置文件
不保留配置信息
项目创建成功，根据提示输入命令，运行项目
项目启动成功
在浏览器中输入地址，成功运行项目
3.使用Vite搭建项目

官方网址:https://vitejs.cn/

（1）使用 npm init vite 创建项目
（2）输入项目名称vitedemo1

（3）选择框架为Vue

（4）选择纯vue还是带是typescript的vue

（5）项目创建完成

（6）根据提示，输入指令安装运行，效果如下

4.创建我的第一个SFC

以clidemo1为例。

在HBuilderX中导入该项目，结构如下：

（1）右键点击Views文件夹，新建vue文件，取名FirstView.vue

（2）在FirstView.vue中编写代码

（3）打开router下的index.js，增加一段代码，为新的页面配置路由

（4）打开App.vue，在首页上增加导航

（5）启动项目，运行网站，访问我创建的页面，成功！