Vue-Vue CLI 脚手架-4

最新推荐文章于 2024-06-15 09:48:52 发布
最新推荐文章于 2024-06-15 09:48:52 发布
阅读量582 收藏 1
点赞数
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46204464/article/details/108976611
版权

文章目录

使用前提

Node

安装-进入官网下载

网址: http://nodejs.cn/download/

检测安装的版本
npm -v

Node环境要求8.9以上或者更高版本

  • 默认情况下自动安装Node和NPM

什么是NPM？

  • NPM的全称是Node Package Manager
  • 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
  • 后续我们会经常使用NPM来安装一些开发过程中依赖包.

Webpack

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

全局安装

npm install webpack -g

在这里插入图片描述

初始化

安装脚手架

npm install -g @vue/cli

注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。

但是可以安装一个桥接工具，这样就可以即用脚手架2（CLI2）也可以使用脚手架3（CLI3）
npm install @vue/cli-init -g

Vue CLI2初始化项目

vue init webpack [项目名称]

Vue CLI3初始化项目

vue create [项目名称]

Vue CLI2详情

初始化项目过程

在这里插入图片描述

.gitconfig

可以更改git 的信息 （作者的信息）

修改初始化项目的属性-ESint

在config文件夹下=>找到index文件=>找到useEslint属性 进行修改

目录结构

在这里插入图片描述

Runtime-Compiler和Runtime-only的区别

在初始化项目的过程中会遇到下面的选项

在这里插入图片描述

那它们有什么区别呢？
在这里插入图片描述
https://blog.csdn.net/liusixsixsix/article/details/108236185 重点

简单结论：

  • 如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
  • 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

vue 运行过程图

在这里插入图片描述

render函数的作用

创建的组件
在这里插入图片描述

使用render的方法

1.在render函数中创建html标签
在这里插入图片描述

  1. 直接传入一个组件
    在这里插入图片描述

npm run build 的运行过程

在这里插入图片描述

npm run dev 的运行过程

在这里插入图片描述

修改配置：webpack.base.conf.js起别名

在这里插入图片描述

Vue CLI3详情

区别

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

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3

vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

移除了static文件夹，新增了public文件夹，并且index.html移动到public中

项目初始化过程

在这里插入图片描述

现在vue3出来了 在第三个选项会让你选择 vue.js 的版本 后面的不变

目录结构详解

在这里插入图片描述

配置文件和修改

ui 方面的配置

  • 使用命令启动配置服务器

vue ui

在这里插入图片描述

直接修改配置文件

文件路径 node_modules > @vue > cli-service > webpack.config.js
在这里插入图片描述

自定义配置：起别名

在这里插入图片描述

ES6补充：箭头函数

https://blog.csdn.net/qq_32614411/article/details/80897256

箭头函数的this指向最近作用域

眼镜宅@-@
关注
专栏目录
Weex的vuecli脚手架
08-10
Weex 的 vue-cli 脚手架
xw-vue-cli-2.0:xw-vue-cli-2.0 脚手架2.0版本
04-22
4. **可定制性**：虽然预配置了许多设置，但开发者仍可根据项目需求自定义配置，通过修改`vue.config.js`文件来调整Webpack配置，或者使用Vue CLI的命令行选项来选择不同的插件或设置。 5. **性能优化**：xw-vue-...
vue4---脚手架
WXX的博客
08-10 525
vuecli-脚手架的介绍和安装 node -v 检查node版本 npm -v检查npm版本 -g global全局 npm install webpack -g webpack的全局安装 npm install -g @vue/cli 安装vue脚手架3，我们现在没有必要安装脚手架2，我们可以在3的基础上拉一个2的模板，使用2 npm install -g vue安装脚手架2 ...
Vue脚手架
Jdoit CW的博客
05-02 2785
1.Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。 A.安装3.x版本的Vue脚手架： npm install -g @vue/cli B.基于3.x版本的脚手架创建Vue项目： 1).使用命令创建Vue项目（可用cmd，powershell，vscode终端） 命令：vue create my-project 选择Manually select features(选择特性以创建...
Vue-cli4脚手架搭建项目
PURSUE__LIFE的博客
04-30 1689
目录 一、安装node.js 二、安装 cnmp、yarn 问题（在此系统上禁止运行脚本） 解决方法 三、安装vue-cli脚手架构建工具 四、创建项目 一、安装node.js node.js官网下载 此前我是有下载过node.js的，但在搭建项目的过程中，因为node.js的版本太低 不适配因而报错 解决方法： 在官网上从新下载一个符合版本的node.js，并放在原来node.js存放的路径上。这样就可以避免重新配置环境变量了。 在下载新的版本的node时，默认..
vue-cli4脚手架搭建实战教程
学亮编程手记
09-20 1172
安装nodejs vue需要通过webpack打包，而webpack是基于node的，所以要先安装nodejs环境。 #安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org #验证cnpm是否安装成功 cnpm -v 安装yarn（可选） #安装facebook的yarn包管理工具（取代npm） npm install yarn 安装vue-cli 验证vue-cli是否已安装 安装vue-cli命令 $
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
vue-i18n基本脚手架 使用vue-i18n-loader的单个文件组件中的区域设置消息 区域设置消息丢失和未使用的报告（实验性） 环境变量 :rocket: 入门 如果yon没有使用Vue CLI创建的项目： vue create my-vue-app 将插件...
vue脚手架----vue cli
77今天也学习了的博客
11-04 161
脚手架工具的作用： 帮助完成项目的代码目录结构，项目结构和部署，热加载，代码单元测试等功能。 vue cli俗称vue项目脚手架，可以快速搭建vue开发环境以及对应的webpack配置。所以使用vue cli需要先安装node(因为webpack的使用需要先安装node，然后才能使用npm—npm为node自带的) vue cli使用前提： 安装node： 直接在官网下载安装：http://nodejs.cn/download/ 检测安装的node版本： node环境要求版本 >= 8.9
easy-vue-cli:超高可玩性的Vue-cli
04-27
Easy-Vue-Cli --- 超简单的Vue脚手架 开箱即用的vue脚手架（全中文注释） 全薪升级的webpack4版本，优化目录文件 优雅的打包进度条, 让你的终端更加优雅 更简单的proxy配置，只需要再package.json内的proxy配置...
vue脚手架---vue-cli
weixin_52428043的博客
06-02 100
vue基于脚手架创建项目
Vue44-创建vue脚手架
最新发布
qq_31532983的博客
06-15 369
创建vue脚手架
vue-cli 版本 4.5.4 脚手架搭建项目
lss0555的博客
08-19 2412
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
Vue脚手架的搭建-Vue-cli4的步骤
LuckXinXin的博客
03-14 501
搭建4.0版本的步骤： 第一：安装全局Vue4.0的脚手架 先卸载之前版本的脚手架： npm uninstall vue-cli -g ，全局卸载。 安装Vue新的的脚手架： npm install -g @vue/cli ，全局安装。 第二：打开cmd窗口，输入命令 vue create + 你的项目名 选中我们需要的功能模块(空格键选择或取消)： 然后回车根据自己需要选择语言 ...
vue3.0，Vue/Cli脚手架4.0的创建
weixin_43824526的博客
05-10 421
1.由于vue/cli的需要node.js8.9及更高版本，若您使用的vue/cli版本太低，请你重新下载最新版本 npm uninstall vue-cli -g #该命令是卸载当前vue/cli版本 或者可以升级当前的vue/cli npm update -g @vue/cli 2.使用Vscode，打开新的终端，进入要项目存放的目录,首先执行以下几个命令 npm install -g @vue/cli vue -vsersion #查看vue版本 3.环境搭建成功后，即可创建项目，在想要存
Vue-CLI（四）
YYZ_Obsessiveness的博客
10-16 126
查看所有安装的包：npm list -g --depth 0 拉取 2.x 模板 (旧版本) Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：npm install -g @vue/cli-init。vue init 的运行效果将会跟 vue-cli@2.x 相同。vue init webpack my-project。此时既可以用CLI2也可以CL.
vue-cli3项目升级到vue-cli4 的方法总结
10-15
主要介绍了vue-cli3项目升级到vue-cli4 的方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue (八) vue-cli 脚手架
一条到晚游泳的鱼
10-09 94
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 实现的交互式的项目脚手架。 一个丰富的官方插件集合，集成了前端生态中最好的工具。 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 安装vue-cli 需要node环境 下载地址 npm install -g @vue/cli 校验安装是否成功： 创建项目 通过命名行创建： vue create project 通过vue ui 图形化界面创建，命令行执行： vue ui 执行后会打开一个浏览
Vue CLI 4与项目构建实战指南
06-09 1082
Vue CLI的作用和优势Vue CLI（Vue.js Command Line Interface）是官方提供的一个标准工具，用于快速搭建Vue项目架构。标准化开发流程：Vue CLI提供了一套标准的开发流程和项目结构，有助于团队协作和项目维护。快速原型开发：通过Vue CLI可以快速创建项目原型，提高开发效率。丰富的插件生态：Vue CLI拥有丰富的插件，可以轻松集成各种功能，如路由、状态管理、打包优化等。易于定制和扩展：Vue CLI支持对构建配置的深度定制，满足不同项目的需求。
vuejs学习4.4 vueCLI3和箭头函数
qq_39225271的博客
09-09 484
vueCLI3vueCLI3创建项目vueCLI3目录结构 vueCLI3创建项目 vueCLI3基本上零配置 vue create vuecli3learn 然后pick a preset选择一个配置，这里选择Manually select features来手动选择配置，（空格选择取消），选择完成回车 这里选择单独的配置文件便于修改 选择n，如果选择了向想删掉， vueCLI3目录结构 ...
VueCli3全新小白入门教程(vue+fetch+axios)
05-13
本系列课程会从零基础带大家学习Vue, 从最开始的Vue的CDN, 到后面的脚手架, 其中包括fetch, axios, keep-alive, component, mixin, 组件之间的通信等.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值