Vue从注册到安装全过程（保姆级教程）

第一步：安装配置Node.js

第二步：查询是否安装成功Node.j（node -v，Node.js用于服务器端开发和运行JavaScript程序）；查询是否安装成功npm（npm -v, Node Package Manager,npm是Node.js的包管理器，用于安装、管理和更新JavaScript包/模块）

第三步：配置淘宝镜像，用管理员身份运行cmd，然后安装淘宝镜像cnpm，提高效率（npm install -g cnpm –registry=https://registry.npm.taobao.org）

第四步：查看cnpm配置（cnpm config list）

第五步：查看cnpm是否修改成功（cnpm -v）

第六步：全局安装VUE(cnpm install vue -g)

第七步：安装Vue.js的脚手架工具 Vue CLI （npm install -g @vue/cli）

第八步：验证vue安装成功 （vue -v）

第九步：验证vue.js的脚手架 Vue CLI是否安装成功（vue -v），并查询Vue CLI的版本号（vue -version）

第十步：安装webpack模板 （npm install webpack -g或者cnpm i webpack webpack-cli webpack-dev-server -g）

解释第十步：
cnpm i webpack webpack-cli webpack-dev-server -g
使用的工具：这是使用 cnpm（淘宝的 npm 镜像工具）来安装。

安装的内容：
webpack：核心打包工具，用于处理和打包模块。
webpack-cli：Webpack 的命令行工具，提供运行 Webpack 的 CLI 接口。
webpack-dev-server：开发服务器，提供热更新（HMR）功能，便于本地开发。
安装范围：全局安装（-g），在全局环境中可以直接使用这些工具命令。

npm install webpack -g
使用的工具：这是使用 npm（Node.js 官方提供的包管理工具）来安装。
安装的内容：
仅安装了 webpack，即核心打包工具。
安装范围：全局安装（-g），可以在命令行中直接使用 webpack 命令，但其他功能（如命令行接口、开发服务器）需要单独安装。

第十一步：查询webpack -v的版本号（webpack -v） ，如果无法查询到版本号，可以通过安装指定版本来解决，例如：（npm install -g webpack@5.75.0）

第十二步：安装vue路由 vue-router（npm install vue-router -g）

创建并运行项目（传统方式）：

第一步：选择项目存放位置，然后开始创建vue项目（vue create 项目名称）

第二步：选择vue版本

{
当箭头上下键无法按动时，请使用一下方式解决
1.当前界面，按CTR + C终止创建命令；
2.使用 alias vue=’winpty vue.cmd’ ，更新命令环境；
3.再次使用 vue create demo创建项目；
4.即可使用键盘上下键选择。
}

第三步：cd 进入新生成的项目目

第四步：启动开发服务器（npm run serve）

第五步：启动成功，复制终端中出现的链接 访问链接查看项目。

创建并运行项目(vue ui图形界面方式)

创建并运行项目（Vue ui）图形界面的方式创建项目，适合新手，图形化操作，模块化选择、实时日志，可视化管理; 对高度自定义的项目不友好、效率低。功能受限。

第一步：选择项目存放位置，然后开始创建vue项目（vue ui）

第二步: 启动成功，复制终端中出现的链接 访问链接查看项目

第三步：根据自己的需求进行选择，之后就成功了

{
（1、写个项目问价夹名字，注意命名规则；2、什么都不管，直接下一步；3、选择手动配置，下一步；4、将Babel、Router、Vuex点开，其余通通关闭，下一步；5、选择Vue.js的版本，创建项目）
}

第四步：创建项目，不保存预设，稍等片刻，创建完成。

第五步：如果像第二次进入，需要vue ui 在最上边的目录开始用。

上述所有步骤，已经网页搭建完成。接下来就是梦开始的地方。喜欢的宝宝可以分享给其他的好朋友喔！！！谢谢支持