vue-cli的安装及webpack创建项目

1. 首先在Node.js官网https://nodejs.org/en/下载node安装包，其中包含了包管理工具npm。
2. 安装完成后，打开cmd，输入npm -v ，出现版本号即为安装成功。
   
   查看npm版本号
3. 接下来就是vue-cli的安装和后续项目的创建。
4. 由于vue3之后的版本相较于之前的版本在命令行中有了一些较大的改动，而网上许多版教程仍旧在使用3.0以前的命令，故以下分别介绍3.0以前和以后的安装、创建项目命令。

3.0之前的版本（即1.x和2.x）：

1. 安装vue-cli：npm install -g vue-cli

• 可以在vue-cli后面加上 @版本号 来指定安装哪一个版本，如 npm install -g [email protected]
• 不加版本号的话自动下载最新的版本，3.o以前的最后一个版本是2.9.6
• -g 表示全局安装

2. 安装后检查安装的版本：vue -V （注意：大写的V ！！！）或vue --version
   出现版本号即为安装成功。
3. 创建项目：vue init webpack 项目名
   经过一系列配置后，项目创建完成（配置过程与3.x不同，可参照B站视频教程）
4. 进入项目目录下 : cd 项目名
5. 启动项目：npm run dev
6. 启动成功后，浏览器访问 localhost:8080 即可

3.0之后的版本（即3.x）：

1. 安装vue-cli：npm install -g @vue/cli
   自动下载最新版本，写本文时最新版本为3.10.0
2. 安装后检查安装的版本：vue -V （注意：大写的V ！！！） 或 vue --version
   
   查看vue-cli版本号
3. 创建项目：vue create 项目名

• 创建过程较为繁琐，会下载很多包，所以创建时间长，创建完成的项目体积大（创建过程与2.x不同，可参照B站视频教程）

• 创建完会出现如下提示：

  
  
  项目创建完成

4. 进入项目目录下 : cd 项目名
5. 启动项目： npm run serve
   启动后会提供两个两个访问地址

• 本地Local：http://localhost:8080/
• 网络Network：http://10.1.161.125:8080/
  注意：网络IP和端口号可能会变，不是固定的，不同的电脑也可能不同
  
  运行

6. 停止项目：按下 ctrl + c ，选择 y
7. 项目不断进行开发，开发完成后打包，上线
8. 打包项目： npm run build
   打包完成之后，会生成dist文件夹，项目上线时候，只需要将dist文件夹放到服务器就行了。
   
   项目结构