Vue-cli

vue官方提供的一个脚手架，用于快速生成vue的项目模板。

提供了如下功能：

• 统一的目录结构
• 本地调试
• 热部署：修改后不用再次运行，就可以加载最新程序
• 单元测试
• 集成打包上线
  依赖环境：NodeJS

环境安装

• NodeJS的安装与配置
• 安装vue-cli: yarn global add @vue/cli
• vue项目的创建
  • 命令行：vue create vue-project01
  • 图形化界面：vue ui
  • 如果无法运行vue命令，请把C:\Users\*\AppData\Local\Yarn\bin加入到path变量中。

Vue项目-目录结构

Vue项目-启动

所在项目的命令行中运行：yarn run serve

Vue项目-配置端口

在vue.config.js文件中新增devServer信息：

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({

  transpileDependencies: true,

  devServer: {

    port: 7000

  }

});

Vue项目开发流程

• Vue的组件文件以.vue结尾，每个组件由三个部分组成：<template>、<script>、<style>。

后端开发中，我们实际在.vue文件中操作的比较多。