Javascript

【前端52_Vue】工程化

本文主要是介绍【前端52_Vue】工程化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

  • 工程化 Vue cli
    • 简介
    • 快速开发
      • 全局安装 vue/cli-service-global
      • 启动 vue serve
    • 创建项目
      • 命令行创建
      • Vue UI

工程化 Vue cli

简介

它的全称叫做：command line interface

缺乏系统性的工程管理，优化，压缩

  • 如果是单文件的话，如果是团队开发，那么单文件就会引发很多次冲突

快速开发

你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发

全局安装 vue/cli-service-global

要想起一个vue 项目，我们需要安装一个依赖

npm install -g @vue/cli-service-global

启动 vue serve

我们新建一个 vue 文件，然后通过 vue serve hello.vue 来预览一下

在这里插入图片描述

创建项目

命令行创建

通过如下命令创建项目

vue create 你的项目名

在这里插入图片描述

自定义有如下选项（以后可能更多）
在这里插入图片描述

创建完项目之后是这个样子
在这里插入图片描述

Vue UI

或者通过页面交互的形式来创建项目，在终端里输入如下命令

vue ui

敲击回车后，浏览器会自动弹出 Vue ui 的 dashbord （仪表盘），页面大概长这个样子

在这里插入图片描述

可以通过 inspect 检查的功能查看 vue cli 脚手架 自动给我们配置的 webpack 配置

在这里插入图片描述

这篇关于【前端52_Vue】工程化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航