《循序渐进Vue.js前端开发实战》电子书学习-第9章-vue cli的使用

最新推荐文章于 2025-05-15 17:31:33 发布

嗷呜磊桑

最新推荐文章于 2025-05-15 17:31:33 发布

阅读量484

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端学习

本文链接：https://blog.csdn.net/m0_46614929/article/details/131158043

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文件里，这是网页的入口文件，代码如下：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

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

App.vue里的内容：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

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

运行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