vue安装教程（如何安装vue-cli）

一、先安装好，弄得，确定node已经安装好

按照“安装node能够执行运行js代码的软件”步骤，进行安装node。

更换nvm 安装版本：

完成安装node版本号，并可以随意更改版本号！！

二、安装 VUE Cli

已成功安装VUE Cli。

以下解释：

在react或者vue中安装包遇到这样的错误果断切换成淘宝的镜像源就行！

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

安装VUE Cli的命令如下：

此过程将从仓库服务器中下载VUE Cli，通常耗时30秒至5分钟左右。

**提示：**如果安装过程中的日志提示更新npm版本，或提示某些软件版本偏旧等，只要没有出现 ERROR字样，均可无视。

**注意：**以上操作仍需要管理权限才可以成功执行。

安装完成后，可通过以下命令检验VUE Cli是否安装成功：

3.1通常使用Vue的命令来创建VUE CLI工程，并且，会将工程创建在执行命令时的位置，所以，先在命令

提示符窗口中进入Vue Workspace（自行指定的用于存放项目的文件夹），例如（以下示例中的 # 开头是注释，不要执行）：

当进入Vue Workspace后，就可以创建工程了。

使用命令即可创建VUE CLI工程，命令格式是：

输入以上指令后，按下 Enter 键将准备创建工程，创建过程可能耗时较长，注意：不可反复按 Enter键，否则会自动选择后续各设置选项的默认项。

创建过程中会有一些选项，最先提示的选项是 Please pick a preset ，表示“请选择一个预设项”，推荐选择 Manually select features ，表示“手动选择”，通过键盘的上下箭头进行选择，选择到目标项后按下键盘的 Enter 键到下一步：

接下来的选项是 Check the features needed for your project ，表示“选择你的工程中需要使用的功能”，推荐在列表中选择 Babel 、 Router 、 Vuex 这3项，使用键盘的上下箭头移动，使用空格选中或取消选中，选择完成后按下键盘的 Enter 键到下一步:

接下来的选项是，表示“选择你的工程中希望使用的Vue.js的版本”，推荐选择 2.x 这项，选择到目标项后按下键盘的键到下一步：

接下来的选项是，表示“是否在路由中选择历史模式”，推荐选择“是”，输入 Y 后按下键盘的键到下一步（提示信息中， Y 是大写的，表示它是默认选项，不输入而直接按下键是等效的）：

接下来的选项是 Where do you prefer placing config for Babel, ESLint, etc.? ，表示“你习惯把一些配置信息存放在哪里？”，推荐选择In package.json，即存放在 package.json 文件中，选择到目标项后按下键盘的 Enter 键到下一步:

最后的选项是 Save this as a preset for future projects? ，表示“是否保存以上配置信息，作为后续将创建的新工程的预设？”，推荐选择“否”，输入 N 后按下键盘的 Enter 键（提示信息中， N 是大写的，表示它是默认选项，不输入N而直接按下 Enter 键是等效的）:

至此，配置过程已经结束，接下来会自动创建工程，耗时取决于网络速度，通常需要30秒至5分钟左右。如果未出现 Error 字样，通常是创建成功了

3.2.启动服务
**注意：**从现在开始，你可以使用IntelliJ IDEA或类似的开发工具来打开你的项目，并使用内置的Terminal执行各个命令，使用方式与命令提示符窗口完全相同。进入工程目录，执行 npm run
serve 命令即可启动此工程的服务（过程中会编译打包此工程）：

当提示以下信息时，表示工程已成功启动：

当工程成功启动后，即可根据提示的URL在浏览器中进行访问：

3.3.停止服务
如果需要停止服务，在控制台使用Ctrl + C即可。

**提示：**当按下Ctrl + C后，会提示 "终止批处理操作吗(Y/N)?" ，其实，当按下Ctrl + C后，服务已经被停止，在此提示中无论选择 Y 或 N 结果都已经不重要了。

Idea中启动项目

终止启动

输入:

补充:
启动之后一般不需要重启
VUE Cli工程启动的服务支持热部署(热更新，即:当保存对源代码的修改后，会自动重新编译打包并覆盖原本已经启动的服务中的文件)，并没有重启服务的做法，如果在某些场景中需要实现“重启”的效果（例如修改服务端口等)，可以先停止服务，然后再次启动服务。
此服务默认占用8080端口，如果端口已经被占用，将自动修改端口为8081或继续向后递增端口号
如需手动修改端口号，在工程根目录下的package.json中修改scripts属性下serve的值:
vue-cli-service serve --port端口号
指定端口号:如需手动修改端口号，在工程根目录下的package.json中修改scripts属性下serve的值:
vue-cli-service serve --port 端口号
提示:即使显式的指定了端口号，如果指定的端口仍被其它服务占用，仍会自动在指定端口号的值的基础上递增，以使用新的端口号!例如显式的指定了使用9090端口，如果9090被占用且9091可用时，会自动改为使用9091端口。

vue安装教程（如何安装vue-cli）

3.1通常使用Vue的命令来创建VUE CLI工程，并且，会将工程创建在执行命令时的位置，所以，先在命令

终止启动

相关推荐