Vue-cli3简单使用(图文步骤)

Vue-cli3.X创建项目 1.环境要求 安装Vue-cli3.x的前置条件：Node.js 以Windows为例安装Node.js,百度 “Node.js官网” 或”Node.js中文网”均可 ,如无特殊要求 下载安装 LTS版（长期支持版，该版本已满足Vue CLI官网所需要求版本要求） 一路Next即可，一般无需更改默认安装设置 安装完毕在开始菜单内即可找到一个名为 Node.js 的文件夹如下图 注：Node.js内可直接运行js基础代码（非DOM等相关代码）** 而我们需要使用的是 Node.js command prompt 2.Vue-CLI安装： 官方命令 Vue CLI 3 是一个快速搭建 Vue.js 应用程序的工具，它简化了项目设置，提供了许多预设的配置选项，让开发者能够更专注于编写应用的核心逻辑。在本篇文章中，我们将详细介绍如何在Windows环境下安装Vue CLI 3，并创建一个新的Vue项目。 确保你已经安装了Node.js。Node.js是JavaScript的服务器端运行环境，它允许我们在本地运行JavaScript代码，对于Vue CLI来说，Node.js是必需的。推荐下载LTS（长期支持版），因为这一版本通常包含了Vue CLI所需的最低版本要求。安装过程很简单，只需按照向导一步步操作即可。 安装完Node.js后，打开Node.js Command Prompt（或简称Node.js命令提示符）。在这个环境中，我们可以执行npm命令，它是Node.js的包管理器，用于安装、管理Node.js的依赖包。 Vue CLI 3 的安装通过npm进行，运行以下命令： ```bash npm install -g @vue/cli ``` 注意，命令中的`@`符号不能省略，否则会安装Vue CLI的旧版本。如果你已经安装了旧版本，可以先卸载再安装新版本，卸载命令是： ```bash npm uninstall vue-cli -g ``` Vue CLI 3 的卸载命令则是： ```bash npm uninstall @vue/cli -g ``` 由于npm的默认源在国外，国内下载可能较慢。你可以通过以下命令查看当前的npm镜像源： ```bash npm get registry ``` 如果需要，可以切换到淘宝npm镜像，以提高下载速度。首先设置npm的镜像源为淘宝： ```bash npm config set registry http://registry.npm.taobao.org/ ``` 然后，安装cnpm，这是淘宝团队提供的npm替代品： ```bash npm install -g cnpm --registry=https://registry.npm.taobao.org/ ``` 接下来，我们可以使用Vue CLI 3 创建项目。选择一个合适的目录，例如桌面，通过`cd`命令进入该目录： ```bash cd desktop ``` 创建项目使用`vue create`命令，项目名不能包含大写字母： ```bash vue create learn ``` 在选择配置阶段，你可以选择默认配置、之前保存的配置，或者手动选择功能。手动选择功能时，可以根据项目需求勾选Babel、ESLint、路由管理(Router)、状态管理(Vuex)等插件。 项目创建完成后，进入项目目录并启动项目： ```bash cd learn npm run serve ``` 这将启动一个热更新的开发服务器，你可以通过提示的两个URL访问你的应用。虽然第二个地址理论上不能对外访问，但它可能用于某些特定情况，例如本地代理设置。 此外，Vue CLI 3 还提供了一个图形用户界面（GUI）工具，可以通过`vue ui`命令启动。在GUI中，你可以创建、管理和查看项目，选择配置，甚至远程控制项目构建。这对于初学者或团队协作来说非常方便。 Vue CLI 3 提供了一套简洁、高效的工具链，帮助开发者快速搭建Vue.js项目，同时提供了丰富的自定义选项，以适应不同项目的需求。通过本文，你应该对Vue CLI 3的基础使用有了清晰的理解，可以开始愉快地开发Vue应用了。