Vue-CLI快速搭建Vue项目

目录

• Vue-CLI简介
• 可视化界面搭建Vue项目
• 完全命令行搭建Vue项目

Vue-CLI简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖： – 可升级； – 基于 webpack 构建，并带有合理的默认配置； – 可以通过项目内的配置文件进行配置； – 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

详细内容请查看vue-cli官网。

使用之前要确保已经安装npm、node.js以及vue，安装完成后可以通过命令行查看。

image.png

可视化界面搭建Vue项目

在终端中输入 ==vue ui== 之后会自动打开浏览器

> vue ui

image.png

选择项目需要创建的目录，点击在此创建新目录

image.png

填写项目文件夹名，选择包管理器npm，点击下一步。预设选默认，然后创建项目。

image.png

点击创建项目后，我们会看到终端正在执行命令。

image.png

项目创建完成后，可以看到文件夹中已经有了test，使用vscode打开项目，项目目录结构如下。

image.png

此时打开新终端，输入npm run serve。

image.png

image.png

按住Ctrl并点击网址，即可在浏览器中查看vue项目

image.png

完全命令行搭建Vue项目