共同学习Vue.js --- Vue CLI 脚手架

最新推荐文章于 2024-05-26 19:21:51 发布
最新推荐文章于 2024-05-26 19:21:51 发布
阅读量302 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47081743/article/details/110940685
版权

文章目录

一、Vue CLI 脚手架

1.1 Vue CLI是什么？

如果只是简单的写几个Vue的demo程序,那么就不需要Vue CLI,如果在开发大型的项目,那么就需要使用Vue CLI,在使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常会使用一些脚手架工具来帮助完成这些事情。
CLI 是Command-Line Interface ，翻译为命令行界面，俗成脚手架。Vue CLI是一个官方发布vue.js 项目脚手架.使用vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

1.2 Vue CLI 使用前提 - Node

  • 安装NodeJS
    可以在官网中下载安装

  • 检测安装的版本
    默认情况下自动安装Node和NPM
    Node环境要求8.9以上或更高的版本
    在这里插入图片描述

什么是NPM?
NPM的全称是Node Package Manager, 是一个NodeJS 包管理和分发工具,已经成为了非官方的发布Node模块(包) 的标准.

cnpm安装:
由于国内直接使用npm的官方镜像是非常慢的,这里推荐使用淘宝NPM镜像. 你可以使用淘宝定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm; npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用cnpm 命令来安装模块了: cnpm install [name]

1.3 Vue CLI 使用的前提 - Webpack

Vue.js 官方脚手架工具就使用了webpack模板

  • 对所有的资源会压缩等优化操作
  • 它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效

1.4 Vue CLI 使用

安装Vue脚手架
npm(cnpm) install @vue/cli@3.2.1 -g
在这里插入图片描述
如需升级全局的 Vue CLI 包，请运行：
npm update -g @vue/cli
注意: 上面安装的是Vue CLI3的版本,如果需要按照Vue CLI2的方式初始化项目时不可以的.

如果使用vue/cli2,则
在这里插入图片描述

  • Vue CLI2 初始化项目
    vue init webpack my-project

  • Vue CLI3 初始化项目
    vue create my-project

二、Vue程序运行过程

Vue程序运行过程分析图
在这里插入图片描述
词语解释:

  • parse:解析
  • ast （abstract syntax tree）抽象语法树
  • virtual dom 虚拟dom
  • UI(真实dom)

使用runtime-compiler 运行过程:
template解析成ast，ast编译成render函数，render函数走向虚拟dom（vdom），最后虚拟dom渲染成真实的UI

template -> ast -> render -> vdom -> UI

使用runtime-only 运行过程:
render函数走向虚拟dom（vdom），最后虚拟dom渲染成真实的UI; 优势: 1，性能更高。2，需要的vue源代码更少

render -> vdom -> UI

我们一般在用Vue手脚架CLI搭建项目的时候，选择的是Runtime-only就可以了，但是第1个会保险一点。
在这里插入图片描述

三、Vue CLI3 创建项目和目录结构

3.1 认识Vue CLI3

vue-cli 3 与 2 版本有很大区别

  • vue-cli3是基于webpack4打造,vue-cli2还是webpack3
  • vue-cli3的设计原则是"0配置",移除的配置文件根目录下的,build和config等目录
  • vue-cli3提供了vue ui 命令,提供了可视化配置,更加人性化
  • 移除了static文件夹,新增了public文件夹,并且index.html 移动到public中
  • 创建完成项目之后,会自动创建git 文件

3.2 初始化Vue CLI3

Vue CLI3 初始化项目
vue create my-project
目录结构详解图如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
完成后结果:
在这里插入图片描述
src 目录下main.js 文件
在这里插入图片描述

3.3 运行项目

执行命令说明
在这里插入图片描述
执行启动命令: npm run serve

在这里插入图片描述
点击本地地址:
在这里插入图片描述

3.4 其他配置

我们也可以在终端执行vue管理可视化工具命令进行管理vue: vue ui
效果如图所示
在这里插入图片描述
如果系统默认的配置不能满足我们的需求的时候我们可以自定义添加配置,如图所示
在这里插入图片描述

大超Bing
关注
专栏目录
Vue.js-VueCLI详解
hxy1625309592的博客
04-29 1065
1.1 什么是Vue CLI CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。 Vue CLI是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。 1.2 Vue CLI使用前提条件 1.2.1 安装NodeJS 可以直接在官方网站中下载安装，网址: http://nodejs.cn/download/ 默认情况下自动安装Node和NPM，Node环境要求8.9以上或者更高版本。 检测安装的版本
山东标梵讲解分享js搭建自己的脚手架工具
标梵互动
02-21 419
前言 相关技术栈和依赖 javascript 发布 npm 包。 commander 包的使用 download-git-repo 包的使用 分析 脚手架vue-cli相信大家都使用过，很便捷。 # 全局安装 vue cli 包 npm install -g @vue/cli-service-global # 使用vue cli 内置指令创建一个工程 vue create hello-world # 运行项目 cd hello-world npm i ..
详细安装步骤：vue.js 三种方式安装(vue-cli)
chenyu_Yang的博客
03-23 1964
build：最终发布的代码的存放位置。config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。node_modules：npm 加载的项目所需要的各种依赖模块。src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：assets:放置一些静态资源文件、css、js、图片(会根据图片大小分类进行base64命名还是其他方式命名)等components:目录里放的是一个个的组件文件router/index.js：配置路由的地方。
js配置自定义脚手架
Wjangia的博客
04-10 500
自定义脚手架
vue.js之路(1)——vue-cli脚手架的搭建
热门推荐
YuuyaRin的博客
01-03 3万+
相比于主流的angular和react前端框架，vue在近年来也变得非常火热。他吸取了前两者的优点，同时学习曲线也更加平缓。所以本魔王准备入坑了~~ 首先从vue的脚手架搭建开始吧。 这里不得不吐槽，window相对mac和linux确实在软件开发方面，非常不方便，代码打包，环境搭建等，简直爆炸~~..然而，嗯，本魔王就是在用win10，哎~ 嘛，废话不多说，今天的任务就是把脚手架搭好，虽然
【轻松学vue】vue.js脚手架（一）脚手架搭建
吾生也有涯，而知也无涯
05-29 330
vue-cli脚手架搭建 环境：node.js、mysql、vue-cli 工具：webstrom、Git vue-cli脚手架的搭建所依赖的环境是node.js，使用的是node.js提供的npm命令，所以在开始脚手架搭建之前必须安装node.js环境。 前面的教程中有node.js的安装，可选择查看 vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack...
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
The Ultimate Guide to Learn Vue.js - By Bilal Haidar
最新发布
07-03
- **基础知识**：在深入学习Vue.js之前，掌握JavaScript的基础知识至关重要。这部分内容将涵盖JavaScript的基本语法、变量类型、函数、对象以及数组操作等内容。 - **进阶概念**：此外，还会涉及更高级的主题，如...
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
10-17
Vue CLI 是 Vue.js 官方提供的一个强大工具，用于快速搭建现代化的 Vue.js 应用。它通过自动化配置，简化了项目的初始化、构建过程以及开发环境的设置。然而，在使用 Vue CLI 进行开发时，有时会遇到热更新（Hot ...
jslibbase最好用的js第三方库脚手架
08-11
最好用的js第三方库脚手架，fork或clone本仓库，即可搭建完成一个新库的基础框架
【轻松学vue】vue.js脚手架（三）组件嵌套
吾生也有涯，而知也无涯
05-29 221
组件嵌套 实际上，HelloWorld已经实现了组件嵌套。嵌套过程：首先创建组件->使用import导入->在处理逻辑中注册组件->在模板中插入组件标签 例：在app.vue中嵌套user组件 在components文件夹中新建User.vue <template> <div class="user"> {{username}} ...
从零开始使用node.js制作一个脚手架
雨溪的博客
05-26 1283
脚手架是用于生成一个项目的基本结构的工具,它可以帮助我们构建Vue,React等项目的基本结构,让我们不用自己建立项目的结构简便了我们的开发同时也规范了项目的结构.我们创建vue项目时就会使用来创建,这个命令本质上就是帮我们安装一个的包并运行它,这个包就是创建这个项目的脚手架.生成项目的结构一般如下所示,根据选项的不同,生成的项目结构会有一点差异,我这里以Vue3+Ts的项目结构为例.脚手架的功能只有生成项目的基本结构!!!,打包代码等功能都是打包工具提供的不要弄混了.Hi👋,这里是瑞雨溪**->
Vuejs脚手架
tian_to_tian的博客
09-07 887
一、Vuejs脚手架介绍 1、什么是vue-cli脚手架 本质：一套文件结构 2、安装下载 1)、安装 npm install -g @vue/cli 2)、创建项目 vue create 项目名 注：项目名不能包含大写字母 文件结构： public（不会编译） index.html src（会编译） assets：放资源文件（css、...
【nodejs】脚手架从零开始搭建JBD
qq_50767141的博客
02-02 471
devDependencies & dependencies 编写bin文件 回到 package.json 添加如下启动项 ⭐编写src文件 🚀main.js 完成上一步操作后，我们需要逐步进行命令选择需要使用 Reflect 中的 ownkeys进行每条命令的遍历最后使用 forEach进行循环操作 最后一行的判断 help事件 执行help的时候输出mapActions和命令行自带的option main代码 💡create.js 获取仓库信息 抓取
实现一个自己的脚手架教程
2301_79226238的博客
10-11 347
脚手架并不实现，难的是最佳实践的整理和沉淀。本文不会涉及到最佳实践方面的内容，只是教会你如何实现一个最基础的脚手架，以此作为展示最佳实践的载体。如何搭建一个脚手架的工程如何开发和调试一个脚手架脚手架中如何接收和处理命令参数脚手架中如何和用户交互脚手架中如何拷贝一个文件夹或文件脚手架中如何动态生成一个文件脚手架中如何处理路径问题脚手架中如何自动安装模板所需依赖以上的案例是 mustache 最简单的使用，下面来额外介绍一些常用的使用场景。
node.js入门之脚手架
weixin_44804827的博客
04-06 552
可以使用program中的command方法进行注册注意：command一定要写在parse上面。
搭建一个nodejs前端脚手架的方法步骤
Mo_Luffy的博客
01-04 1316
前言 像我们熟悉的 vue-cli，taro-cli 等脚手架，只需要输入简单的命令 taro init project ，即可快速帮我们生成一个初始项目。在日常开发中，有一个脚手架工具可以用来提高工作效率。 搭建前准备 第三方工具 commander.js ，可以自动的解析命令和参数，用于处理用户输入的命令。 download-git-repo ，下载并提取 git 仓库，用于下载项目模板。 ...
使用Node.js搭建自己的脚手架
weixin_48845614的博客
07-03 1704
使用Node.js搭建自己的脚手架
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值