1、背景说明
在使用vue开发的过程中,基础环境的搭建是必不可少的,Vue CLI是就是需要搭建的基础环境。
2、Vue CLI 简介
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
- 通过
@vue/cli
实现的交互式的项目脚手架。 - 通过
@vue/cli
+@vue/cli-service-global
实现的零配置原型开发。 - 一个运行时依赖 (
@vue/cli-service
),该依赖:- 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
3、Node.js安装
Vue CLI安装是基于Node.js的基础环境安装的,所以,要进行node.js的安装,Node.js的中文官网上面下载长期支持版本(LTS)。根据不同的操作系统,可以选择不同的版本,如下图:
windows版本,下载安装文件双击直接安装就行了。
安装完成之后,进行环境的验证:
PS C:\Users\Lenovo> node --version
v16.13.2
如上图,表示安装成功。
4、Vue CLI环境安装
Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
安装命令:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装验证:
PS C:\Users\Lenovo> vue --version
@vue/cli 5.0.6
5、项目构建
通过 Vue CLI进行项目的创建,官方提供了两种方式:
第一种是通过命令行的方式进行创建:
首先切换到你要创建的目录下面,然后,在目标目录下面执行如下命令:
vue create 项目名称
例如:vue create myvue
第二种,是通过UI界面的方式进行创建。
首先切换到你要创建的目录下面,然后,在目标目录下面启动UI界面,命令如下:
vue ui
就会出现如下的界面:
可以在上面UI界面上面创建项目。
具体一些版本注意事项可以参考官网,如下连接:
Home | Vue CLI (vuejs.org)https://cli.vuejs.org/zh/
6、启动项目
通过上面完成了项目的搭建,接下来就启动一下项目,启动命令如下:
npm run serve
完成启动之后,命令行界面如下:
可以通过上面的连接进行访问。 到此位置环境搭建完成。