如何创建Vue项目

一、安装node环境

1. 下载地址为：https://nodejs.org/en/
2. 检查是否安装成功：如果输出版本号，证明我们安装node环境成功了

node -v       //输入该行命令检查是否安装成功
v16.15.1       //输出版本号代表安装成功

二、安装npm

由于现在版本的nodejs已经集成npm所以无需安装，可以用npm -v 查看版本

npm -v    //输入该行命令查看npm版本
8.3.0    //输出npm版本号

三、提高效率安装淘宝镜像

输入命令：npm install -g cnpm –registry=https://registry.npm.taobao.org
即可安装淘宝镜像，以后再用到npm的地方直接用cnpm来代替就好了

安装淘宝镜像后检查安装成功

cnpm -v       	//输入该行命令查看cnpm版本
.....			//注意：‘.....’为安装过程的代码显示，无需操作
.....
.....
win32 x64 10.0.22000       //出现这两行代表安装成功
registry=https://r.npm.taobao.org

四、搭建Vue项目环境

1. 安装Vue脚手架vue-cli

输入命令：cnpm install -g vue-cli
即可全局安装Vue脚手架

2. 检查脚手架是否安装成功

vue -V    //输入该行命令查看Vue版本 注意：V是大写的
2.9.6    //输出版本号

3. 如果发现Vue版本较低 可以使用下面的命令进行更新

cnpm install -g @vue/cli  //输入该行命令进行更新脚手架
.....                    //注意：‘.....’为安装过程的代码显示，无需操作
.....
.....
vue -V                 //待上面更新完成再次输入该行命令
@vue/cli 5.0.4        //输出版本号

4. 如需升级全局的 Vue CLI 包，请运行下面的命令：

npm update -g @vue/cli

五、创建Vue项目

 vue create vue-demo //输入该行命令创建vue项目，（vue-demo）为项目名称
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features   //此处点击回车键即可
.....    //注意：‘.....’为安装过程的代码显示，无需操作
.....
.....
 $ cd vue-demo    //显示该两行代表创建成功 
 $ npm run serve //先CD到项目目录 再启动项目

六、运行Vue项目

1. 先输入命令进入项目目录再输入命令启动项目

cd vue-demo  //vue-demo为项目目录
//进入到项目目录会自动另起一行
npm run serve  //注意：必须在项目目录内才能启动项目
.....    //注意：‘.....’为运行过程的代码显示，无需操作
.....
.....
 App running at:   //显示下方路径即代表启动成功
  - Local:   http://localhost:8080/
  - Network: http://192.xxx.0.xxx:8080/

2. 在浏览器输入Vue项目路径，显示Vue代表安装启动成功
   

---