您现在的位置是:首页 > 正文

项目脚手架VueCLI2&3

2024-04-01 02:01:46阅读 2

项目脚手架VueCLI2&3

VueCLI简介

VueCLI官方文档地址:https://cli.vuejs.org/zh/

VueCLI(Vue Command-Line Interface )致力于快速构建基于webpack的vue初始化项目。Vue CLI具有以下核心功能

  • Vue CLI封装了了完整的静态资源模块化打包方案

  • Vue CLI提供了本地的热加载调试服务

  • Vue CLI还提供了预处理,文件转译,自动化测试和静态检测等功能

  • Vue CLI提供了快速开始零配置的原型开发

VueCLI与webpack之间的关系

  • Vue CLI是基于webpack配置实现,所以Vue CLI依赖于webpack

  • webpack依赖于NodeJS,所以使用Vue CLI之前要先安装好NodeJS(包含npm包管理工具)

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

VueCLI的核心封装内容都是使用webpack来实现的。很多朋友说:Vue并不难学,难学的是Webpack。我改进一下说法:Vue并不难学,webpack也不难学,难学的是前端工程化的思想和前端工程化的实践!而Vue CLI就是前端工程化的思想的集中体现。

VueCLI版本

VueCLI有多个版本,Vue-CLI2.X、Vue-CLI3.X、VUE-CLI4.X、VUE-CLI5.X。其中VUE-CL2.X推出后,对于初学者难点在于:webpack配置管理,对前端工程化理解不深入,难于配置。然后就推出了VUE-CLI3.X主要做了以下改进:

  • 隐藏webpack配置,因为webpack配置绝大部分都是模板配置,每个项目的配置方法都差不多。在此基础上,提供了个性化修改入口。从而简化了项目目录结构,使配置文件更加清晰。

  • 提供UI界面化配置的服务,使Vue-CLI3上手更加容易。

  • Vue-CLI4.5以下对应的是VUE2

  • Vue CLI 4.5以上,对应的是Vue3,当然,创建项目的时候可以选择Vue2

VueCLI2快速搭建项目

要使用VUE-CLI2搭建项目,需要有如下配置:

  • 需要安装NodeJS、版本大于等于8.9

  • 安装NodeJS的包管理工具NPM

  • VUE-CLI脚手架默认webpack作为模块化资源打包工具,因此需要安装

NodeJS安装教程这里不过多做介绍,webpack安装命令如下:

npm install webpack -g

安装Vue CLI2

全局安装VUE CLI2,打开命令行工具输入命令:

npm install -g vue-cli

安装完成之后,可以通过vue -V命令查看全局安装的版本

使用Vue CLI2初始化一个项目

在安装完成Vue CLI2及必备的工具包之后,我们就可以使用Vue CLI2初始化一个项目了。使用如下命令

vue init <template_name> <project_name>

  • <template_name>表示模板名称

  • <project_name>表示项目名称

VUE常用模板就是webpack,其他模板可自行创建学习。所以我们最终的项目初始化命令,如下:

vue init  webpack vuecli2demo

执行vue init命令之后,vue脚手架会让我们做一些填空、选择,根据我们的填写结果,选择初始化的组件及内容。

  • Project name:填写项目名称,如果不填默认为命令行project_name

  • Project description:填写对项目的描述,会体现在package.json中,后期可以修改

  • Author:项目作者及邮箱,会从本机的git配置里面自动读取

  • Vue build:Runtime Only或者Runtime+Compiler

  • Install vue-router:是否安装vue-router前端路由,我们暂时没学到,不安装No

  • Use ESlint to lint your code:是否使用ESlint做编码规范检查,检查不通过则编译不通过。如果你对ESLint编码规范比较熟悉,这里可以选择Yes

  • Set up unit tests:是否初始化单元测试,这里暂时没学到,不安装No

  • Set up e2e test with NightWatch:是否引入端到端的测试框架NightWatch,不安装No

  • Should ……created:包管理工具是使用yarn还是npm?这里我们使用npm,如果你习惯使用yarn可以选择yarn

完成以上的选项之后,会自动为我们创建一个名称为vuecli2demo目录及项目文件(如果你在创建过程中,网络缓慢卡死,请先阅读第五小节)。项目目录结构如下,我们将在下一节内容中,对目录及目录的内容进行详解。

使用命令

 cd vuecli2demo
 npm run dev

访问http://localhost:8080,可以看到如下的界面,表示项目初始化成功

如何解决创建过程缓慢卡死的问题

由于众所周知的原因,可能在下载远程模板的时候出现缓慢、甚至卡死的情况。我们可以将npm包管理工具的下载源更换到国内的服务。先用npm get registry命令查看一下当前的源

npm get registry

将上面的源地址,替换为国内阿里npm源地址,如下:

npm config set registry http://registry.npmmirror.com

此时再用npm get registry命令查看一下当前的源,就是修改之后的国内的源地址了,下载更为的快速

VueCLI2目录文件详解

Vuecli2目录如下:

  • build:build文件夹内文件是webpack资源模块化打包核心配置文件,包括生产环境资源打包、测试环境资源更新服务、npm和nodejs版本检查文件、vue文件处理等配置。

  • config:config文件夹主要包含一些:生产和测试环境常用环境变量相关配置,比如静态资源打包路径、测试环境服务端口、host等信息。

  • src:src文件夹主要存放资源代码文件,比如js文件、vue文件。src/assets用于存放静态资源文件,比如:css文件、图片文件等等。这是开发人员的核心目录

  • static:static文件夹是webpack默认存放静态资源(css、image)的文件加,和src/assets不同的是:static文件夹内容在打包时会直接复制一个同名文件夹到dist文件夹中,不会参与webpack编译过程。

  • dist:dist文件夹,图中是没有的,是资源模块化打包结果文件夹。在资源打包后自动创建、生产环境上线发布就是这个文件夹的内容

  • node_modules:node_modules文件夹是第三方类库安装目录,通常不需要开发人员手动修改

  • .babelrc:.babelrc是js文件编译兼容性配置文件

  • package.json:package.json是前端项目配置文件,比如一些项目启动、打包脚本,第三方依赖库版本信息等都是在这个文件中。package.json.lock是npm安装具体第三方类库版本锁定信息,只查看不修改。

构建过程调用关系说明

build文件夹下面的文件主要是webpack相关的环境配置文件,和webpack打包、编译相关的配置选项及相关文件。

生产环境打包文件调用逻辑

  • 运行npm run build命令调用build.js进行生产环境模块化资源文件打包

  • build.js引用生产环境的变量配置文件中的变量-config/index.js和prod.env.js

  • build.js根据webpack.prod.js文件以及生产环境config变量配置,进行生产环境模块化资源打包

  • webpack.prod.conf.js整合webpack.base.js基础webapck配置,及vue-loader.conf.js处理.vue文件

测试环境服务启动及调试过程及逻辑

  • 运行npm run dev命令调用webpack-dev-server命令(package.json脚本配置),以webpack.dev.conf.js作为入口配置文件进行测试服务启动

  • webpack.dev.conf.js引用测试环境的变量配置文件中的变量-config/index.js和dev.env.js

  • webpack.dev.conf.js整合webpack.base.js基础webapck配置,及vue-loader.conf.js处理.vue文件

  • utils.js主要在构建过程中的工具函数文件,主要的工具函数都是完成css文件的处理工作

src文件夹说明

  • assets文件:用于存放静态资源,如css文件、image文件

  • components文件夹:用来存放 .vue 单文件组件

  • router文件夹:用来存放前端页面路由配置信息文件

  • App.vue:项目的主组件,所有的vue组件都是该组件的子组件或后代组件

  • main.js:项目全局文件入口

Vue CLI3.x的安装

同样安装Vue CLI3之前,我们需要安装好NodeJS,8.9或更高版本(推荐8.11.0+)。Vue CommandLine Interface在3.0版本改名为@vue/cli,所以我们全局安装命令,如下(可以在任意目录下面执行):

npm install -g @vue/cli@3.9.3

查看vue版本

vue -V

使用Vue CLI3.X创建项目


这里将不再使用2.0版本的vue init命令,而是使用vue create命令,格式如下:

格式:vue create <project-name>
实例:vue create vuecli3-demo

创建一个叫做vuecli3-demo的项目,有两种方式

  1. 选择default默认项目功能特性,还是手动选择个性化项目功能特性。默认的项目特性,会帮我们安装babel语法兼容和eslint语法检查功能。

  1. 选择个性化功能特性,按down键并回车。进入到具体特性功能选择界面:
vue create vuecli3-manually-select

在这个界面,我们可以按Up、Down键上下移动,按空格键选择选项,选中之后,具体的功能特性前方会有星号标识。

  • Babel 支持使用babel做转义。这个通常来说是必选的。

  • TypeScript 支持使用 TypeScript 书写源码。如果使用到就选上。

  • Progressive Web App (PWA) Support PWA 支持。我们还没学到,暂时不选。

  • Router 支持 vue-router 。前端路由,我们还没学到,暂时不选。

  • Vuex 支持 vuex 。我们还没学到,暂时不选。

  • CSS Pre-processors 支持 CSS 预处理器。这个通常来说是必选项目。

  • Linter / Formatter 支持代码风格检查和格式化。觉得语法检查过于严格,影响开发效率的可以不选。

  • Unit Testing 支持单元测试。暂时不选。

  • E2E Testing 支持 端到端测试。暂时不选。

选择完成之后回车,因为我们选择了CSS预处理器,所以需要具体告知。你习惯使用哪种CSS预处理器就选择哪一种。

这里的意思是选择一种格式化代码方式:我一般选择 ESLint + Prettier

这里的意思是问你什么时候进行代码规则检测,我一般会选择保存就检测,也就是Lint on Save

回车出现以下界面这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪,通常我们会选择放到独立位置,让package.json文件干净点,所以选择第一个

最后,CLI3.0会询问我们是否将当前配置保存,下次可以直接使用,而不是再次选择填写。

Vue CLI2.0与3.0目录差异


  • 3.0版本没有static文件夹,取而代之的是public文件夹用于公开的静态资源访问。

  • 3.0版本将index.html移动到public文件夹里面了

  • 3.0版本将build和config文件夹配置移除了,实际相关的配置仍然存在,只不过隐藏起来了。被内置到@vue/cli-service

项目服务启动

使用npm run serve命令启动项目(注意这里不再使用2.0版本的vue run dev命令),访问图中的http地址

在浏览器中看到如下内容表示vue CLI3项目创建成功

网站文章

  • Vue中slot插槽的使用,看这篇你就懂啦

    Vue中slot插槽的使用,看这篇你就懂啦

    本文主要总结了vue中三种主要插槽的使用了和注意点,其中最为复杂的为作用域插槽,它的主要作用是用来方便子组件给父组件进行值传递,方便父组件拿到子组件的一些值,做渲染判断

    2024-04-01 02:01:39
  • 解决draw.io输出svg格式导入到word显示text is not svg

    解决draw.io输出svg格式导入到word显示text is not svg

    解决draw.io输出svg格式导入到word显示text is not svgctrl+a全选,然后将下面两个取消勾选即可

    2024-04-01 02:01:13
  • 优质网址收集

    1.免费PPT模板下载网址都是免费且免登录,网址为:http://www.ypppt.com 2.在线工具网站,包括格式转换,文字识别,图片压缩,视频压缩等,网址为:http://www.nicetool.net/ 3.第一教程网,是一个自学网站,网址为:http://www.diyijc.com/ ...

    2024-04-01 02:01:06
  • [debug]-centos7使用yum安装包,报错Loaded plugins:fastestmirror...No package x available Error: Nothing to do

    1.问题描述 yum服务挂了,安装任何包都会报错 # 执行命令 $ yum install xxx # 报错 Loaded plugins: fastestmirror, refresh-packag...

    2024-04-01 02:00:59
  • 进度条实现与后端进行交互,实时更新进度条(JAVA web项目实现) 热门推荐

    实现思路 网页进度条更新有两种方式 1、轮询请求服务端、返回进度 2、服务端实时推送进度数据给客户端 轮询方式的实现方法,服务端在执行的过程中将进度数据保存再session中,客户端调用的时候从ses...

    2024-04-01 02:00:51
  • Unity 革命性技术DOST入门一使用介绍

    Unity 革命性技术DOST入门一使用介绍

    Unity DOTS入门介绍 1.什么是DOTS? DOTS是Data-Oriented-Tech-Stack,官方中文翻译是:多线程式数据导向型技术堆栈。 DOST由以下三大核心成员组成: Enti...

    2024-04-01 02:00:27
  • Nginx性能优化

    Nginx性能优化

    1、首先我们需要了解性能优化要考虑哪些方面。2、然后我们需要了解性能优化必要用到的压力测试工具ab3、最后我们需要了解系统上有哪些注意和优化的点,以及nginx配置文件。

    2024-04-01 02:00:19
  • JavaScript之insertBefore()和自定义insertAfter()的用法。

    在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我们发现一个问题,就是假设在图片列表之后还...

    2024-04-01 02:00:11
  • C++函数重载/运算符重载/函数对象/谓词/内建函数对象

    C++函数重载/运算符重载/函数对象/谓词/内建函数对象

    我们可以通过自己写成员函数来实现加号运算符的重载。但是这样呢,咱们写的函数名可能不同。这样就不统一了,所以的编译器就给我们取了一个通用的名字:operator+(oper-操作 + ator-表人 -> 操作数)。编译器还给咱们一个小礼物,我们可以不用调用这个函数了,直接用 + (当然这只是简化了,肯定调用了我们写的函数)

    2024-04-01 01:59:47
  • 网页设计中JS与Java的区别

    在各种网页制作技术论坛中,常常有人询问javascript与Java有什么区别,甚至有人误认为javascript就是Java.javascript与Java确实有一定的联系,但它们并不像我们想象的那样联系紧密,甚至可以肯定地说它们有很大的区别.什么是JavaScript ?JavaScript 是对 ECMA 262 语言规范的一种实现.本教程的目的就是引导您学习使用 JavaScrip...

    2024-04-01 01:59:40