《风尚坐火箭学习vue》-- 第十四章：Vue的脚手架简介和vue-cli的安装

最新推荐文章于 2024-05-28 13:33:36 发布

风尚云网

最新推荐文章于 2024-05-28 13:33:36 发布

阅读量3.9k

点赞数 8

分类专栏：风尚坐火箭学习vue vue 文章标签： jquery javascript vue vue.js 前端框架

本文链接：https://blog.csdn.net/zsx0806/article/details/121574589

版权

vue 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

风尚坐火箭学习vue

20 篇文章 3 订阅

订阅专栏

前言：前端框架千千万，独有vue占一半

我是风尚，让我们一起坐火箭去学习Vue

第十四章：Vue的脚手架简介和vue-cli的安装

上章回顾：“组件讲完了，风尚感觉如何？”老头说。“啊？发生了啥？”风尚懵了....

“可别懵，一会儿讲一下Vue脚手架和vue-cli的安装啊”老头说。

风尚无奈地看看老头默默的点点头。

Vue的脚手架简介

这是关于Vue脚手架的官方文档：

介绍 | Vue CLI🛠️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/guide/

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

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

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

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。

#CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

加载其它 CLI 插件的核心服务；
一个针对绝大部分应用优化过的内部的 webpack 配置；
项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

如果你熟悉 create-react-app 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。

CLI 服务章节涵盖了它的具体用法。

#CLI 插件

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。我们会在插件和 preset 章节进行深入讨论。

不需要了解脚手架太多，你只需要记住：

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

是一个涵盖多种官方插件的集合包，可以让我们开发者更好的用Vue开发！

vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK

安装Vue脚手架

安装vue-cli

使用npm（需要安装nodeJS环境）以下为nodeJS官网

Node.jshttps://nodejs.org/zh-cn/

1.node -v 查看版本号

2.2.npm i @vue/cli -g 下载安装Vue脚手架【时间有点长耐心等待】
下载完没问题下一步

3.cd / 进入c盘
--------------------------------------------------------------
4.vue create myvue 在c盘创建我的Vue 进入Vue cli
-----------------------------------------------------------------------
手动选择 Manually select features
空格选择选项
-----------------------------------------------------
(*) Choose Vue version 选择版本
(*) Babel babel ES6代码转换ES5
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router Router路由(页面切换)
(*) Vuex Vuex 全局状态管理（数据管理)
( ) CSS Pre-processors
>( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
-----------------------------------------------------------------------------
5.点回车、选择2.0版本------
------------------------------------------------------------------------------
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x
----------------------------------------------------------
6.输入n使用hash模式当路由
输入y使用历史模式当路由
建议选择n
-------------------------------------------------------------
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n-------回车
-------------------------------------------------------------------
7.选择配置文件放入单独文件
-------------------------------------------------------------------
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files------回车
In package.json
-------------------------------------------------------------
8.是否选择预设 n
---------------------------------------------------------------
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n -------输入n
----------------------------------------------------------------
9.回车等待,创建完成，创建成功页面：
----------------------------------------------------
Vue CLI v4.5.15
? Creating project in C:\myvue.
?? Installing CLI plugins. This might take a while...

added 1232 packages in 3m

16 packages are looking for funding
run `npm fund` for details
?? Invoking generators...
?? Installing additional dependencies...

added 5 packages in 5s
16 packages are looking for funding
run `npm fund` for details
? Running completion hooks...

?? Generating README.md...

?? Successfully created project myvue.
?? Get started with the following commands:

$ cd myvue
$ npm run serve

C:\>
-------------------------------
10.cd myvue进入自己的Vue
-------------------------------
C:\>cd myvue
C:\myvue>

--------------------------------------
11.输入npm run serve回车等待
--------------------------------------
C:\myvue>npm run serve
------------------------------------------------
12.出现如下界面：你的VueAPP已经创建完成！
记得:复制端口
------------------------------------------------
DONE Compiled successfully in 4311ms 上午10:30:29

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.88.88:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

----------------------------------------------------------------------------
13.假如说手误关闭：：
win+r cmd
--------------------------------------------
Microsoft Windows [版本 10.0.17763.107]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\Administrator>cd /myvue

C:\myvue>npm run serve

> myvue@0.1.0 serve
> vue-cli-service serve

INFO Starting development server...
98% after emitting CopyPlugin

DONE Compiled successfully in 1998ms 上午10:36:23
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.17.26:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

这样在浏览器输入端口就可以看见可视化的脚手架：