《风尚坐火箭学习vue》-- 第十四章:Vue的脚手架简介和vue-cli的安装
Vue的脚手架简介和vue-cli的安装
前言:前端框架千千万,独有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.
这样在浏览器输入端口就可以看见可视化的脚手架:
创建的项目文件夹在C盘里!
风尚学会了吗?不会快去再做两遍!
更多推荐
所有评论(0)