Vue3最佳实践第一章带你深入了解Vue3项目创建 1 (Vue CLI 创建vue项目)

Zht_bs

已于 2023-10-30 09:50:14 修改

阅读量450

点赞数 2

分类专栏： vue 文章标签：前端 vue.js javascript

于 2023-09-07 13:13:40 首次发布

本文链接：https://blog.csdn.net/zhtbs/article/details/132100874

版权

vue 专栏收录该内容

22 篇文章 6 订阅

订阅专栏

Vue.js是一款广受欢迎的JavaScript框架，专为创建网站、web应用程序和管理系统等前端用户界面(UI)设计。其流行不仅因为它拥有庞大的开发者社区和丰富的学习资源，还因为它具有低学习成本和易于上手的特点。当你在使用中遇到疑问或困难时，可以轻松地找到各种解决方案和指南，这是Vue.js成为当前最主流开发框架的重要原因之一。

现在，我们主要使用三种方法来创建Vue3项目，分别是Vue CLI，Webpack和Vite。接下来，我将为你详细介绍每种方法创建Vue项目环境的步骤。在了解了每种方法的特点和优势后，你可以根据自己的需求选择最适合你的项目运行环境。

第一章 Vue3项目创建 1 Vue CLI 创建vue项目
 第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目
 第一章 Vue3项目创建 3 Vite 创建 vue项目
 第二章 Vue3 基础语法指令
 第三章 Vue Router路由器的使用
 第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)
第四章 VUE常用 UI 库 2 ( ailwind 后台框架)
第五章 Vue 组件应用 1( Props )
第五章 Vue 组件应用 2 ( Emit )
第五章 Vue 组件应用 3( Slots )
第五章 Vue 组件应用 4 ( provide 和 inject )
第五章 Vue 组件应用 5 (Vue 插件)
第六章 Pinia,Vuex与axios,VueUse 1（Pinia）
第六章 Pinia,Vuex与axios,VueUse 2(Vuex)
第六章 Pinia,Vuex与axios,VueUse 3（VueUse）
第六章 Pinia,Vuex与axios,VueUse 4（axios）
第七章 TypeScript 上
 第七章 TypeScript 中
 第七章 TypeScript 下创建Trello 任务管理器
 第八章 ESLint 与测试 ( ESLint )
第八章 ESLint 与测试 ( Jest )
第八章 ESLint 与测试 (TypeScript 中Jest与检测环境集成)

1.1 Vue CLI 创建vue项目

对于初次接触Vue的朋友们，在创建项目的时候通常会首选Vue CLI。今天，我们就来学习一下如何安装Vue CLI并用它构建Vue应用程序。我将详细地演示整个创建过程，以便让Vue的初学者们能更好地理解如何使用Vue CLI来创建Vue项目。如果你还没有vue.js的基础，那么请你仔细阅读以下内容，这将对你的学习大有帮助。

1.1.1 Vue CLI 安装

CLI 是 Command Line Interface 的缩写，是一个支持使用命令行使用 vue.js 进行开发准备的工具。开发以项目为单位进行。使用 Vue CLI 创建项目时，您还可以安装项目中使用的功能（仅选择必要的功能）。Webpack 也是一起安装的，所以你一创建项目就可以开始开发 Vue。不使用 Vue CLI 也可以从头开始构建 Vue 应用，但由于它支持开发所需的准备工作，因此是对 Vue.js 的介绍，如果你没有vue基础最好不要使用 Vue CLI创建项目。除了 Vue CLI创建项目现在还有一个种 Vite 的选项，Vite 现在是前端开发的主流脚手架。

要使用 Vue CLI创建项目，需要在电脑中安装node.js 和 npm。安装完成后通过命令 node -v, npm -v 检查是否安装了 node.js 和 npm。如果运行该命令并显示版本，表示安装完成。之后可以使用 npm 的环境中安装 Vue CLI。安装完成后，运行vue –version，查看是否显示版本信息。（也可以使用 vue -V）

$ npm install -g @vue/cli
$ vue --version
@vue/cli 5.0.8

如果由于权限问题导致安装失败，请以管理员身份使用 sudo 命令运行安装。

$ sudo npm install -g @vue/cli

如果您已经安装了 Vue CLI 并想更新到最新版本，执行以下命令。

$ npm update -g @vue/cli

如果要查询 vue cli 有哪些其它命令，终端中运行 vue就可以检查到各种命令的选项

$ vue
Usage: vue <command> [options]
Options:
  -V, --version                             输出版本号
  -h, --help                                显示命令帮助
Commands:
  create [options] <app-name>                创建一个由 vue-cli-service 提供支持的新项目
  add [options] <plugin> [pluginOptions]     在已创建的项目中安装插件并调用其生成器
  invoke [options] <plugin> [pluginOptions]  在已创建的项目中调用插件的生成器
  inspect [options] [paths...]               使用 vue-cli-service 检查项目中的 webpack 配置
  serve                                      当前项目运行“npm run serve”
  build                                      当前项目编辑“npm run build”
  ui [options]                               启动并打开 vue-cli ui
  init [options] <template> <app-name>       从远程模板生成项目（旧版 API，需要@vue/cli-init)
  config [options] [value]                   检查和修改配置
  outdated [options]                        （实验性）检查过时的 vue cli 服务/插件
  upgrade [options] [plugin-name]           （实验性）升级 vue cli 服务/插件
  migrate [options] [plugin-name]           （实验性）为已安装的 cli 插件运行迁移器
  info                                       打印有关您的环境的调试信息
  help [command]                             显示命令帮助

  Run vue <command> --help 给定命令的详细用法.

1.1.2 Vue CLI 创建项目

安装 Vue CLI 后我们来创建一个项目。使用vue create 命令，在命令后录入任何项目名称。例如项目名称是 vue-zht。在电脑中任意目录下执行命令，在执行文件夹中会创建一个名为 vue-zht 的项目文件夹，Vue.js 开发所需的所有文件都保存在该文件夹下。
运行 vue create 命令后，系统会提示选择创建的项目种类。通常为了保证基本操作，将选择默认的 [Vue 3] babel 和 eslint 项目。如果有另外的需求可以选择Manually select features自己配置项目信息。

$ vue create vue-zht
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features   手动选择功能

如果您选择手动选择，将出现以下屏幕，让您选择您需要的功能。

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

选择Default ([Vue 3] babel, eslint) 默认创建vue项目。创建时间会有十几秒，只需等待安装完成。

Vue CLI v5.0.8
  Creating project in D:\vue\vue-zht.
  Initializing git repository...
  Installing CLI plugins. This might take a while...
added 847 packages in 1m
  Invoking generators...
  Installing additional dependencies...
added 96 packages in 15s
  Running completion hooks...
  Generating README.md...

  Successfully created project vue-zht.
  Get started with the following commands:
 $ cd vue-zht
 $ npm run serve

创建成功后，进入 vue-zht项目文件夹下，并按照执行结束时显示的消息，运行 npm run serve 启动项目。完成命令需要一点时间，因为第一次运行的时候需要构建/编译代码。

D:\vue>cd vue-zht
D:\vue\vue-zht>npm run serve
> vue-zht@0.1.0 serve
> vue-cli-service serve
 DONE  Compiled successfully in 11396ms                                                                         10:24:42
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.22.132.232:8080/
  Note that the development build is not optimized.
  To create a production build, run npm run build.

编译后会看到两个 URL，Local 和 Network。将浏览器指向本地：http://localhost:8080/。显示此屏幕时表示项目创建完成，Vue 可以正常工作。
在这里插入图片描述

1.1.3 Vue 项目结构

作为使用 vue create 命令创建和构建项目的结果，我们能够能保证 Vue.js App 显示在浏览器中。Vue项目创建之后，让我们更好的了解一下项目中的文件与配置信息在程序运行中所起到的作用。

vue-zht
   |---node_modules
   |---public
   |    |--index.html    //项目启动页面
   |---src               //代码源文件
   |    |--assets        //资源目录
   |    |--components    //组件目录
   |    |--main.js       //入口文件
   |    |--App.vue       //代码脚本
   |----package.json

1.1.3.1 node_modules 文件夹

node_modules 文件夹保存了所有使用 npm 命令安装的第三方库信息。可以看到文件夹里面还有更多的文件夹，并且 vue.js 是使用各种库来配置的。如果您使用 npm 命令添加一个新库，它将被添加到这个node_modules 文件夹中。

1.1.3.2 public 目录

通过查看 public 文件夹中的 index.html，您可以查看在普通 Web 服务器上显示的HTML内容。打开index.html让我们看看它的代码，你会发现在index.html 的内容中没有浏览器中显示的内容，浏览器显示的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>

大家会发现虽然没有html元素显示内容，但是在 <div id="app">标签下写着构建文件会自动注入。

<div id="app"></div>
<!-- built files will be auto injected -->

这表示项目中的所有Vue生产的html元素内容都会注入到

中。浏览器在将这些

中的html元素内容展示给用户，生产对应的html页面。

如果你创建的index.html页中未没有

元素，那意味着 在 vue.js 完成的前端代码无法加载到你的html中来，这个项目无法正常运行。

在使用vue.js编写代码是通过在指定div id="app"中指定的id，指定的id="app"中的所有元素都会在vue.js的控制之下。vue.js 控制下的元素可以使用 vue.js 进行操作与编程。

1.1.3.3 src 目录

创建项目后，会立即创建三个文件夹：node_modules、public 和 src。node_modules是npm安装的包的存放文件夹，public是存放index.html的public文件夹，剩下的一个是src文件夹。src 文件夹是保存运行应用程序所需代码的地方，这里也是编写和开发 JavaScript 代码的地方。

在 src 文件夹中会有一个 main.js 文件。这个文件正如它的名字一样，main.js 是整个项目中最重要的 JavaScript 文件。它控制着整个Vue项目的中所以有的vue组件的加载与初始化。

1 main.js 文件
Vue3 的 main.js 代码内容比 Vue2 更简单，它采用 Vue3 的通用方式来编写。#app 对应于 index.html 文件中 div 标签中设置了 id=“app” 的应用。它表示 Vue.js 应用程序安装在以 app 为 id 值的元素上。我们可以用“挂载”这个词来形容它，你可以把它想象成创建一个环境，通过id=app 获得挂载元素，在挂载元素下插入一个用 Vue.js 构建的元素来运行 Vue.js。

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app') //将Vue.js与页面#app绑定

2 App.vue
让我们来看看 main.js 文件中导入的 App.vue 的内容。你可以在 App.vue文件中看到浏览器中显示的图片和欢迎的Vue.js 字符串。

<template>
 //图片
  <img alt="Vue logo" src="./assets/logo.png">
  //欢迎的Vue.js 字符串
  <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>

App.vue的扩展名.vue是所有vue.js项目中vue模板的专用文件扩展名，vue文件由三部分组成（模板、脚本、样式）。如果你是一个 Vue.js 的新手，那么扩展 vue 文件可能是你第一次见到，此文件也称为单文件组件 (SFC) 。vue 是 Vue.js 专用的文件扩展名称，它的文件内容不能被浏览器直接使用，需要转换成 JavaScript ，css，html代码才能在浏览器中运行。

<template>
//模板
</template>
<script>
//脚本
</script>
<style>
//样式
</style>

.vue文件会被 webpack 这样的构建工具编辑打包后才能在浏览器中运行。App.vue 通过 webpack 的 Loader 函数（vue.js 中的 vue-loader）转换模板格式，转换后生成的js+html文件浏览器才能正常识别。

3 assets 公共资源

在assets 文件夹包含一个 logo.png 图像文件。assets是用于存储图像的文件夹，它是存储 Vue.js 项目中使用的图像、样式表等其他信息的地方。可以通过从 App.vue 文件中指定相对路径，在浏览器上显示图片文件，后面会解释。

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

1.1.3.4 package.json

package.json 文件是描述项目配置信息的文件。它不是 Vue.js 独有的文件，而是使用 npm 命令管理库时必不可少的文件，并且还描述了已安装库的版本信息。

{
  "name": "vue-zht",
   ......
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  ......
}

如果您使用 npm 命令添加新库，新添加的信息会保存到此处。文件中分为dependencies和devDependencies，但是dependencies中描述的库是生产环境中用到的库。devDependencies 中描述的库是在开发过程中使用的库，不用于生产环境。npm 命令中选项会确定是否将库添加到依赖项或 devDepenciees。有些人可能会担心是否将其添加到依赖项或 devDepenciees，但是不用担心，因为安装说明包含在库文档中。

除了描述库信息外，还描述了构建代码的命令和启动开发服务器的命令。使用Vue CLI命令安装后立即执行的npm run serve命令可以执行，因为serve命令写在package.json文件中。

1.1.4.5 Eslint 检测错误规则

Eslint 是一个检查代码是否按照设定的规则来进行编码，同时用来减少代码错误和提高代码质量的检测工具。例如当你在项目中创建其他模板，模板没有保存在src\components目录下，当你在运行 npm run serve 命令时，收到以下错误：错误内容为“HelloWorld 组件已注册但未在代码中使用”。这个错误就是 Eslint 给出了这个错误提示，被默认规则 vue/no-unused-components 捕获而发生错误。

ERROR  Failed to compile with 1 error
 error  in ./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
/XXXXXX/vue-applicaion/src/App.vue
  13:5  error  The "HelloWorld" component has been registered but not used  vue/no-unused-components

Eslint是在你运行Vue CLI 命令时安装项目的时候安装上的，当选择Default ([Vue 3] babel, eslint)的时候就是默认安装Eslint组件到项目中来。

为避免规则错误可以在 package.json 文件中修改规则配置信息来关闭和禁止“vue/no-unused-components”规则。

例如：在 package.json 文件中的 eslintConfig 规则中添加“vue/no-unused-components”:“off”。

"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {
    "vue/no-unused-components":"off"　//禁止vue/no-unused-components规则
  }
},

设置完成后，再次运行 npm run serve 命令启动服务，之前的错误提示会消失。由于不需要在代码中编写未使用的组件，需要保留 vue/no-unused-components检测规则的时候，在配置文件中删除该行。

1.1.4 vue文件构成

每个vue模板文件都有三部分模板，脚本，样式组成（ template，script，style），下面介绍三个标签基础使用。

<template>
</template>
<script>
</script>    
<style>
</style>

1 template模板

vue模板是用来描述浏览器中显示的HTML内容，它的优点之一是 HTML 可以直接写在模板标签中。template属性中写入HTML代码，写在模板中的html代码就不用担心引号，标签字符冲突等问题了。

<template>
  <h1>Hello World</h1>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
<style>
//样式
</style>

2 script 脚本

在脚本中写入 JavaScript 语法代码。通过 import 语法加载’./components/HelloWorld.vue’ 模块到脚本中来，HelloWorld 是’./components/HelloWorld.vue’ 模块的引用对象。在脚本中通过加载 HelloWorld引用到模块中，页面app元素就可以引入’./components/HelloWorld.vue’ 模板的元素到页面中来。

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

例如在添加一个模块HelloVue.vue到页面中。

<script>
import HelloWorld from './components/HelloWorld.vue'
import HelloVue from './components/HelloVue.vue'
export default {
  name: 'app',
  components: {
    HelloWorld,
    HelloVue
  }
}
</script>

components 目录中创建一个HelloVue.vue 文件，应为Eslint检测规则所以必须在 components 目录下创建。

<template>
    <h1>{{ msg }}</h1>
</template>

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

<style>

</style>

不要忘记将 HelloVue 组件添加到 App.vue 的模板标签中。

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

可以看到浏览器页面中了添加的HelloVue的内容。
在这里插入图片描述

3 style 样式

CSS 可以设置在style 标签有中，页面中就可以使用这些CSS 样式。

!-- 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>