win7系统在HBuilder X上使用vue-cli脚手架创建uni-app项目

win7系统在HBuilder X上使用vue-cli脚手架创建uni-app项目
前期准备：
安装编辑器HbuilderX + 微信开发者工具，HBuilderX是通用的前端开发工具，但为uni-app做了特别强化，微信开发者工具为开发微信小程序必备工具，建议下载稳定版。

一、首先，先进行cli环境配置
1.安装 Node v13.14.0
因Node.js 14.0.0版本开始已不支持win7系统了，只能选择之前的版本，支持WIN7系统比较新的安装版本为13.14.0版本。

Node.js 13.14.0下载地址为：
https://nodejs.org/download/rele ... de-v13.14.0-x64.msi

2.配置npm淘宝镜像源

1. npm config set registry https://registry.npm.taobao.org

复制代码

配置后可通过下面方式来查看镜像源，验证是否成功

1. npm config get registry

复制代码

3.安装 vue-cli 3
Window7系统，Node最高版本只能使用v13.14.0版本，兼容此Node版本的最新vue cli版本为vue cli 4.5.17版本，所以通过指定版本号安装了vue cli 4.5.17版本。

1. npm install -g @vue/cli@4.5.17

复制代码

注：新版Vue CLI的包名称由vue-cli改成了@vue/cli。

检查vue版本的命令：

1. vue --version

复制代码

二、创建uni-app项目
方式一：利用github下载uni-app项目源文件

github下载地址：https://github.com/dcloudio/uni-preset-vue

方式二：使用命令行（vue-cli）创建

正常情况下的创建项目命令(直接下载线上模板资源)

1. vue create -p dcloudio/uni-preset-vue myproject

复制代码

直接使用本地的项目模板创建
vue create -p 你下载好文件的路径 myproject

我的命令示例
vue create -p E:\uni-preset-vue-master uniapp

注意，在创建的过程中不要按到回车键，因为需要进行模版选项(这里我选的是默认模板)，选了之后在进行下一步：



创建成功之后，运行即可。
项目目录结构：


方式三：直接在HBuilder X可视化界面创建（常用）

在窗口栏找到“文件”=>新建=>项目


会在HBuilder X会在右下角提示项目创建成功，成功之后的项目目录结构如下：



三、运行uni-app项目

1. npm run serve

复制代码