07.Vue3 项目开发配套工具 CLI 详解

Vue3 项目开发配套工具详解 1. Vue CLI 的使用和单文件组件

Vue CLI，人称 Vue 脚手架，就是可以快速搭建起 Vue 项目工程开发环境的工具。

官网： Vue CLI

安装脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果是老脚手架需要先删除，然后再安装

npm uninstall vue-cli -g
# OR
yarn global remove vue-cli

安装后查看版本，是否有安装成功。

vue --version

创建项目

使用 vue create 指令来创建一个新项目

vue create demo

里边的东西按照官网的指示，或者使用默认配置即可。

慢慢等安装，然后跟着指令走就行。

访问页面

走到最后一步了，访问对应的页面，可以看到 vue CLI 的默认页面展示了出来。

2. Vue3 项目内部结构解析

src 放要写的代码，然后这里需要理解一个概念，单文件组件。

看项目里边，有一堆后缀为 .vue 的文件，然后分成了三部分，第一部分为 template，里边写的模板，第二部分为 script，第三部分为 style，里面写样式。一个文件代表一个组件。

因为有了 webpack 的加持，前端代码写起来更像是个工程了，现在的导入都是通过 import 语句来引入，也可以不用顾虑地使用 ES 高级语法，因为 babel 也给配置好了，css 预处理编译器、TypeScript 支持都能够方便地配置。

webpack 内容可以看官网学习一下并自己动手配一配，webpack 的熟练配置很重要。

3. 用 vue3 工程试写 TodoList

用 vue 的语法实现一下 todolist:

<template>
  <div>
    <input type="text" v-model="inputValue" />
    <button class="button" @click="handleAddItem">提交button>
  div>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ item }}
    li>
  ul>
template>

<script>
import { reactive, ref } from "@vue/reactivity";

export default {
  name: "App",
  setup() {
    const inputValue = ref("");
    const list = reactive([]);
    const handleAddItem = () => {
      const value = inputValue.value.trim();
      if (value !== "") {
        list.push(inputValue.value);
        inputValue.value = "";
      }
    };
    return { inputValue, list, handleAddItem };
  },
};
script>

<style>
  .button {
    margin-left: 20px;
  }
style>

现在已经实现功能了。如果想要将列表拆分出来的的话，也行。

比如将 TodoList 的 item 拆分为组件，方便以后 item 实现其他功能：

// App.vue
<template>
  <div>
    <input type="text" v-model="inputValue" />
    <button class="button" @click="handleAddItem">提交button>
  div>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ item }}
    li>
    <ListItem />
  ul>
template>

<script>
import { reactive, ref } from "@vue/reactivity";
import { ListItem } from "./components/ListItem.vue";

export default {
  name: "App",
  components: {
    ListItem,
  },
  setup() {
    const inputValue = ref("");
    const list = reactive([]);
    const handleAddItem = () => {
      const value = inputValue.value.trim();
      if (value !== "") {
        list.push(inputValue.value);
        inputValue.value = "";
      }
    };
    return { inputValue, list, handleAddItem };
  },
};
script>

<style>
.button {
  margin-left: 20px;
}
style>

// ListItem.vue
<template>
  <div>{{ msg }}div>
template>

<script>
export default {
  name: "ListItem",
  props: {
    msg: String,
  },
};
script>

<style>
style>

4. vue UI

在命令行里使用 vue ui，可以启动 vue 管理页面。

然后里边可以一路点点点，很多的东西，比如添加插件，添加依赖，启动服务等，都可以直接点击就行。除此之外还有性能分析、数据分析等功能，还是很强的。