Vue项目化

肖静宜22计算机应用技术1班

已于 2023-12-26 23:01:50 修改

阅读量893

点赞数 23

文章标签： vue.js javascript ecmascript

于 2023-12-26 22:53:06 首次发布

本文链接：https://blog.csdn.net/2302_76424895/article/details/135197632

版权

快速构建项目

Vue CLI是一个基于Vue.js进行快速开发的完整系统，是一组用于快速原型设计、简化
应用程序搭建和进行高效项目管理的工具，确保了各种构建工具能够基于智能的默认配置即可平稳衔接。这样开发者可以专注在撰写应用上，而不必花很多时间处理配置的问题。

一、Vue CLI简介

Vue CLI是一组用于快速原型设计、简化应用程序搭建和进行高级项目管理的工具。它由三个主要的工具组成。

1.CLI

CLI是一个npm包，通过 Vue. js命令提供核心功能。它可以轻松地构建一个新项目(vacreate)或者快速创建原始构思(Vue serve)。如果想要对项目进行更具体和可视化的控制，可以通过运行Vue ui命令打开CLI的GUI。

2.CLI Service

CLI Service是一个开发依赖项，安装在使用CII创建的每个项目中。它可以帮助开发页目(Vue-cli-service serve)、打包(Vue-cli-service build)，以及检查内部Webpack项目的配置(Vue-cli-service inspect)。

3.CLI插件

CLI插件也是npm包，为项目提供额外的功能。它们的名字以@ Vue/cli-plugin-(内置插件)或Vue-cli-plugin-(社区插件)开头。可以在开发过程中通过Vue add命令添加它们。
Vue CLI凭借其丰富的功能集，可加速和简化Vue.js项目开发，其主要功能有
(1)基于插件的架构。Vue CLI完全围绕插件而构建，所以非常灵活和可扩展。可以选择在项目创建过程中添加哪些内置插件，还可以在创建项目后随时添加任意数量的插件。
(2)Vue CLI完全可配置、可扩展和可升级。
(3)提供了一系列官方预装插件，集成了前端生态系统的一流工具(Babel、ESLint、Tpe ManuScript、PWA、Jest、Mocha、Cypress和Nightwatch)。
(4)一个默认预设，可以在项目创建期间或之后根据需求进行修改。
(5)无需弹出。与React和Angular CLI工具相比，可以在创建项目后随时安全地检查和调整项目的Webpack配置，无需弹出应用程序并切换到手动配置。
(6)多页面支持。
(7)无需任何配置即可进行即时原型设计。
(8)现代模式功能。构建适用于现代浏览器的应用程序，同时兼容旧版本的浏览器。
(9)一个完整的GUI，可轻松创建、更新和管理复杂项目。
(10)UI插件API。Vue UI公开了一个插件API，可以用它将自定义功能添加到CUI的GUI版本中。

二、使用Vue CLI构建项目

1.VueCLI脚手架的安装

如果已安装了vue-cli(1.x或者2.x),需要进行卸载，卸载命令如下：

npm unistall vue-cli - g

通过npm全局安装@vlue/cli脚手架命令如下：

npm install @ vue/cli@ 3.10 - g

VueCLI安装成功后，可使用vue-V命令查看当前版本号，如图所示：

接下来可以通过Vue CLI脚手架来创建项目了。

2.Vue create命名创建项目

Vue CLI安装成功后，在命令行窗口中，可以使用Vue create命名来创建项目，该命名会自动生成所需的文件、目录、配置和依赖。例如要创建一个名为 helloworld 的项目，命令如下：

Vue create helloworld

执行 Vue create 命令后，可以看到如图所示界面：

在这一步，可以通过键盘向上/向下键选择创建项目的方式，default 是默认选择项，表示选用默认方式创建项目，这种方式包含基本的babel 和 eslint 的设置，适合快速构建项目。Manually select features 选项表示选用手动配置方式创建项目，可以选择项目所需要的 npm包。读者可以根据实际需要选择创建项目的方式，在这里，选择手动配置方式创建 helloworld 项目，手动配置界面如图：

在此界面中，可以通过向上/向下箭头选择操作项，按 Space 空格键选择某一项，按"
键进行所有项的反选操作，图5-3中每个选项的作用说明如下。

(1)Babel: JavaScript 语法编译器。
(2)TypeSeript: TypeScript 是一个 JavaScript（后缀.js)的超集（后级.ts)包含并扩展了
JavaScript的语法，需要被编译输出为 JavaScript在浏览器运行。
(3)Progressive Web App (PWA)Support:渐进式 Web 应用程序。
(4)Router:vue-router(vue 路由）。(5)Vuex:vue 的状态管理模式。
(6) CSS Pre-processors:CSS 预处理器（如：less、sass)。

(7)Linter/Formatter：代码风格检查和格式化（如：ESlint)。

(8)Unit Testing:单元测试(unit lests)。

(9)E2E Testing：端对端(end to end)测试。

在此界面选择需要的选项后，后续还有一些详细配置的选项，读者可以根据需要选径也可以全部使用默认项。项目创建成功后，根据界面提示，可以执行如下两项命名，进人项目目录，启动项目：

cd helloworld
npm run serve

启动项目后，可以看到如图所示界面，说明已经启动了一个localhost:8080本地服务

在浏览器中输入http://localhost:8080地址，看到的页面效果图如下：

3.项目目录

项目创建成功后，可以看到项目的目录结构如图：

项目目录结构中，主要的目录和文件说明。

--dist #打包后文件夹
--public #静态文件夹
|--favicon.ico
l-- index.html #入口页面
-- src #源码目录
--assets #模块资源
|--components #vue 公共组件
|--views
—-App.Vue #页面入口文件
host: l--main.js #入口文件，加载公共组件
l--router.js #路由配置
l--store.js #状态管理
I--vue. config.js #配置文件
l--.eslintrc.js #ES-lint 校验
中的 m l--.gitignore #git忽略上传的文件格式
|-babel.config.js #babel语法编译
|--package.json #项目基本信息

三、插件

Vue CLI使用了一套基于插件的架构，查看前节中创建的helloworld 项目中的
parkage.json，就会发现依赖都是以@ vue/cli-plugin-开头的。插件可以修改 Webpack的内部配置，也可以向 vwe-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的，基于插件的架构使得 Vue CLI 灵活且可扩展。helloworld 项目中的 pack-age. json 依赖声明代码如下：

"devDependencies'":{
"@ ue/cli-plugin-babel":^4.5.0",

"@ vue/cli-plugin-eslint":"^4.5.0",

"@ vue/cli-plugin-pwa":"^4.5.0",

"@ vue/cli-service'"："^4.5.0",
"babel-eslint":^10.1.0"，
"eslint":"A6.7.2"，
"eslint-plugin-vue'":^6.2.2",
"sass'":"^1.26.5"，
"sass-loader'":^8.0.2"，
"yue-template-compiler":"^2.6.11"

}

在以上依赖声明中，以@vue/cli-plugin-”开头的是内置插件，每个CLI插件都会包会一个生成器和一个运行时插件。当你使用vue create 来创建一个新项目的时候，这些插件会跟据你选择的特性被预安装好。
如果想在一个已经被创建好的项目中安装一个插件，可以使用vue add 命令，如下列命名是为项目安装 vwe-router 路由插件

vue add router

命令执行成功后，可以在package.json中的依赖声明中找到router插件的声明，如下图：

四、环境变量

一个软件项目在正式投入运行前，都要经过开发、测试、试运等过程，而每一个环节的
环境不可能完全相同，也就是不同的环境就需要不同的配置参数，环境变量和模式可以很好地解决这个问题。读者可以在项目根目录中放置下列文件来指定环境变量：
(1).env 文件：在所有的环境中被载人。
(2).enr. local1文件：在所有的环境中被载人，但会被 git 忽略。
(3).env.[model]文件：只在指定的模式中被载入。
(4).env. [ mode]. local文件：只在指定的模式中被载人，但会被 git 忽略。

在env 文件中，只包含环境变量的“键=值”对，例如：