Vue项目--从安装到发布

一、安装node

1、下载nvm

我这里用的nvm（node.js version management）一个node.js的版本管理工具，可以安装和切换不同版本的node.js。已经有或者只想安装node.js可跳过

下载链接：

https://github.com/coreybutler/nvm-windows/releases

我的百度资源：https://pan.baidu.com/s/1r_9DNnFC62FFMxrfb7R9BQ?pwd=1473

如果电脑上之前已经单独安装了node，先卸载（可以在控制面板里面卸载），然后再安装nvm

查看是否安装成功

nvm -v

2、配置

2.1、配置环境变量

（如果是默认安装在c盘的。就可以跳过。如果是安装在其他盘的、则需要配置相应的环境变量）

也可以加到个人用户变量

2.2、配置淘宝镜像

我们先找到nvm所在文件位置，点开setting

node_mirror: http://npmmirror.com/mirrors/node/
npm_mirror: http://registry.npmmirror.com/mirrors/npm/

！！！注意

如下错误是淘宝源换了

最好重新配置一下

npm config set registry https://registry.npmmirror.com

3、使用node

3.1、查看

cmd中

nvm ls                      // 看安装的所有node.js的版本
 
nvm list available          // 查显示可以安装的所有node.js的版本

3.2、安装node

（有nvm就不用）可以官网下载哈：Node.js — 在任何地方运行 JavaScript

nvm install 20.18.0

# 卸载
nvm uninstall <b版本号>

3.3、使用指定版本

# 使用指定版本
nvm use 20.18.0

# 查看已安装node.js
nvm list
nvm ls

 4、查看node

node -v
npm -v

5.安装淘宝镜像 (淘宝镜像速度比较快)

npm install -g cnpm --registry=https://registry.npmmirror.com


// 下面的也停止更新了
npm install -g cnpm -registry=https://registry.npm.taobao.org

 ！！！使用旧的出现以下报错

 检查是否安装成功

cnpm -v

 6.全局安装 webpack、webpack-cli

npm install -g webpack
npm install -g webpack-cli 

 二、搭建vue环境

1、安装全局脚手架vue-cli

npm install -g vue-cli         (vue-lcli2，使用vue-cli2.x初始化项目安装这个)
npm install -g @vue/cli      (vue-cli3，使用vue-cli3.x初始化项目安装这个）

慢的话就用

cnpm install -g @vue/cli

 查看是否成功

查看vue版本

npm list vue -g

查看vue-cl脚手架版本

vue -V

2、命令行项目创建

2.1、设置名称

（不能大写字母）

vue create 项目名称

2.2、选择配置信息

上下方向键移动，回车选择

2.3、选择安装资源

空格选择，（*）说明被选上

我的选择如下

2.4、选择版本

2.5、选择路径模式

2.6、预编译器选择 

2.7、语法代码格式检查

ESlint标准，选择代码语法检查和格式化，选择标准即可 

2.8、代码检查时间（什么时候检查）

2.9、第三方文件存在的方式（单独更加灵活）

2.10、是否保存上面这些设置（保存预设）

这里如果选择保存的话，就要输入名字，默认就是文件夹的名字，下次配置的时候就会显示这个文件配置的选项就像上面的一样，在配置的时候会多出来一个，（这里都可以看个人）

创建成功

使用vue GUI创建 

项目创建也可以用Vue GUI

vue ui

具体操作起来会比命令行简单

 输入项目名，更改地址后其他默认就行

后面和命令行基本上是一样的不做赘述了 

2.5、项目结构

项目结构在我发布的项目中（GitHub - zqx1473/releasetestvue: releasetest vue testing）的

README_zqx.md中（releasetestvue/README_zqx.md at main · zqx1473/releasetestvue · GitHub）可以看到详细介绍，并且之后会完善

3、启动项目

咯，人家都告诉我们了