前言:前端框架千千万,独有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 命令,提供 servebuild 和 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.jsicon-default.png?t=LA92https://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盘里!

风尚学会了吗?不会快去再做两遍!

Logo

前往低代码交流专区

更多推荐