vue本身是一个渐进式的前端web框架，允许我们只在项目里面的部分页面来使用vue进行开发，也允许我们仅仅使用vue的部分功能来进行项目开发，如果我们的目标是一个风格统一、可扩展性强的现代化web单页面应用，使用vue提供的一整套完整的流程开发是很合适的。vue cli就是这样一个基于vue进行快速项目开发的工具。

vue cli工具入门

这是一个帮助开发者快速创建和开发vue的工具，核心功能是提供可交互的脚手架项目和运行时的服务依赖，对于开发者来说非常方便

安装

vue cli是一个需要全局安装的npm包，需要事先配置node.js的环境

在终端输入node -v可以查看是否安装

使用npm安装vue cli：node i -g @vue/cli

查看是否安装成功：vue --version

升级：npm update -g @vue/cli

快速创建项目

在终端输入vue create hello world，这是项目名称，然后可以选择配置，自己选一哈，工程的目录如下

一个完整的vue模板工程比元素的html工程要复杂很多，工程里默认文件夹和文件的意义和用法后续会介绍

vue cli不仅可以使用终端交互的命令来创建工程，也可以使用可交互的图形页面创建工程，输入

vue ui 

可以在页面创建项目、导入项目或对已经有的项目进行管理

也可以直接选择default present（vue 3）的项目预设，如何单击创建按。

使用命令和图形创建项目的功能是一样的，前者快捷，后者直观。

vue cli项目模板工程

 项目工程的创建只是vue cli工具链上的一部分，在安装vue cli的时候，我们也安装了vue-cli-service工具，提供了项目的代码检查、编译、服务部署等的功能

模板工程的目录结构

vuecli创建的过程目录，可以看到有三个主要的文件夹和五个独立文件

.gitignore是一个隐藏文件，是用来配置git版本管理工具需要忽略的文件或文件夹，在创建工程的时候，其默认会配置好，将一些依赖、编译产物、log日志等文件忽略，不需要更改

babel.config.js是babel工具的配置文件，babel是一个js编译器，会将es6版本的代码转换成向后兼容的js代码

package.json是比较重要的文件，存储的是一个json对象1数据，用来配置项目名称、版本号、脚本命令以及模块依赖等。当添加额外的依赖的时候，就会记录到这个文件默认的模板工程里，生产环境的依赖：

 开发环境的依赖：

readme.md记录了项目的编译和调试方式，我们可以在其中编写项目的介绍

三个默认的文件夹

node_modules文件下存放了npm安装的依赖模块，文件会被git版本管理工具忽略

public文件夹放置了一些工具资源文件如图标、静态html页面等

src文件夹存放核心功能代码，assets存放资源文件，components存放组件文件。

main.js是应用程序的入口文件，其中代码：

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

main.js文件里只有组件创建和挂载的逻辑，没有对于的html代码，其实html代码是在public下面的index.html文件里，这是网页的入口文件，代码如下：

main.js中定义的根组件将被挂载到id为app的div标签上。在main.js里，导入了一个名为app的组件作为根组件，使用了vue里单文件组件的定义方法，即将组件文件定义在单独的文件中，便于开发和维护

App.vue里的内容：

但文件组件需要定义三部分的内容：template模板部分、script脚本代码部分和style样式代码部分。上面的代码在template模板布局了一个图标和一个自定义的helloworld组件，在js将当前组件内容导出，helloworld.vue文件里的内容：

里面很多的跳转元素，没有很多的逻辑

运行vue项目工程

首先要切换到当前项目的目录，使用cd+文件名就可以了

然后打开终端，npm run serve

页面的情况：

默认的情况，vue项目是运行在8080的端口，我们可以 手动指定端口，例如

npm run serve -- --port 9000

当启动开发服务器后，默认是附带了热重载模块，我们只需要在修改代码后进行保存，网页就会自动更新

使用vue cli里面的图形化页面可以更方便直观的对vue项目进行编译和运行，从cli图形化网页工具进入对于的项目，点击页面的运行就行

 点击启动app就进入了页面，在许多图形化工具不仅可以对项目进行编译，运行和调试，还提供了许多分析报表，例如资源体积、运行速度、依赖项等。

在项目中使用依赖

额外插件的使用必不可少，例如网络插件、路由插件、状态管理插件等。

vue cli插件的过程使用的是基于插件的架构。提供查看package.json文件，可以发现在开发环境下，默认安装了需要的工具依赖，主要依赖执行代码编译、服务运行和代码检查等。安装依赖包需要使用npm相关指令，如果需要安装vue-axios依赖，可以在项目工程目录下执行：

npm i --save axios vue-axios

 安装完成后，可以看到package.json文件自动更新，多了一个依赖项

 不止在这里会更新，其实在node_modules文件夹下也会新增axios和vue-axios相关的模板文件

也可以使用图形化工具进行依赖的安装，也是非常方便的

工程构建

开发完一个vue项目后，需要将其构建成为可发布的代码产品，vuecli提供了对应的工具链来实现这些功能

在vue工程目录下执行下列指令，将项目代码构建成生产包

npm run build

构建的时候需要一段时间，构建完成后，在工程的根目录下面会有一个名为dist的文件夹，此文件夹就是我们需要发布的一个软件包裹，这个文件夹的里面有一个index.html的文件，是项目的入口文件，还有一些静态资源和css、js等相关文件

当然，也可以使用vue ui来进行构建过程

新一代前端构建工具vite

vue cli并不是唯一的vue项目构建工具，如果追求机制的构建速度，可以使用vite

vite和vue cli的对比

vue cli非常适合大型商业项目的开发，是构建vue项目不可或缺的工具，vue cli包括过程脚手架、带热重载模块的开发服务器、插件系统、用户界面等功能。和vue cli类似，vite也是一个提供项目脚手架和开发服务器的构建工具，不过vite不是基于webpack的，它有一套自己的开发服务器，vite的功能也不像vue cli那么完善和强大，只注重于提供基本构建的功能和开发服务器。因此，vite更加小且快捷，其开发服务器比基于webpack的开发服务器快十倍左右，开发服务器的响应速度对于开发者的编程体验和开发效率非常重要。对于大型的项目，可能会有成千上万个的js模块，这时候构建效率的速度差异将会非常的明显

虽然vite的速度很快，但是没有用户页面，也没有插件管理系统，对于初学者并不友好

体验vite构建工具

首先要确保node的版本大于12.0.0

确保复合要求，在终端输入

npm init @vitejs/app

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！