VUE学习——脚手架项目

已于 2022-12-12 17:11:49 修改
阅读量569 收藏 1
点赞数 1
分类专栏： vue学习 文章标签： vue.js 学习 javascript
于 2022-11-29 11:12:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tommy__li/article/details/128043345
版权

目录

VUE组件化基础

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
根组件APP,就是我们之前在（）里面写的，不过抽取出来成一个单独的APP对象
在这里插入图片描述

组件树

在这里插入图片描述
组件是对象

注册组件的方式

在这里插入图片描述

注册全局组件

app.component（“组件名称”，组件） 组件名称中间带-
在这里插入图片描述
后面.vue文件的结构会更加清晰，不是这么写的

目前可以改进的写法，把template放到html里面去写然后用id绑定
在这里插入图片描述

全局组件的逻辑

在这里插入图片描述
因为是对象，所有就可以有这些方法！

组件名称

都是用-这样的命名，最常用，驼峰用的少。home-nav
在这里插入图片描述
html元素在识别的时候是不区分大小写的，所以是不支持驼峰命名组件的识别，但是后面是在vue文件的template里识别的，就可以识别。

全局组件的特点

一旦注册，可以在任何地方使用，可以在其他的组件中用全局组件，也会显示，相当于各组件之间可以调用

局部组件（components真正常用的）

在这里插入图片描述在app（根组件）里面注册，像methods，computed这样的方式去写。此时就只能在根组件中使用这些组件，但是不可以在其他组件中调用这些组件了。
在这里插入图片描述
如果想要在组件里使用局部组件，需要在自己的组件里注册这个组件才可以调用
在这里插入图片描述

但是实际开发所有的组件都会写到.vue文件中，所以上面只是个例子来介绍，实际中是不会这么写的，因为这样的代码逻辑是很乱的

问题：
在这里插入图片描述
我们希望的是在一个组件中逻辑和模板是在一块的，这样一下就可以找到

vue开发模式（真正开发中怎么写）

在这里插入图片描述
希望组件达到的（这里我觉得还是要和jsp的思想分离开，它只是把一个个组件写成这样，方便修改，但是并不是页面所有东西也揉在一起）
在这里插入图片描述
但是vue文件浏览器是不认识的 ，所以需要打包工具进行打包然后浏览器才可以认识（我觉得这个就像打成war包然后部署？？？）

在这里插入图片描述

单文件(SFC)

在这里插入图片描述

VUE CLI 脚手架

感觉这个不就是在idea中创建一个模块那种的感觉，就是把后端的东西往前搬呗，或者这个就是通用的开发思想。（前期都是铺垫，最后引出这个脚手架，挺好的，显示了脚手架的作用，为什么需要模块化开发）
在这里插入图片描述

CLI介绍(CLI:命令行界面)

在这里插入图片描述
npm安装全局CLI
在这里插入图片描述

准备工作（下载node.js和git）

git之前就下载好了。

我自己下载node.js安装

nodejs认识

什么是nodejs‘
现在觉得最好的解释就是nodejs是一个 JS 语言解释器，使得JS也可以在后端服务器上进行使用，以前JS只能在浏览器这样的运行环境中执行，有了nodejs就可以在后台也可以执行了，使得js打通前后端
Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行环境
所以说 Node.js 不是库，是一个运行环境，或者说是一个 JS 语言解释器。
（就是执行js的一个环境，它里面放的是chrome的V8引擎，设计来是用作web服务器构建的。）

npm认识

JS 开发者众多，所以贡献开源代码的人就非常多，所有这些凝结成了 npm 这个世界上最大的软件包仓库。
npm 是 Node Package Manager 的缩写，意思是 Node 的包管理系统。Nodejs 现在如日中天，其中 npm https://www.npmjs.com/ 这个功不可没。在这里，我们要实现各种功能几乎都能找到现成的别人写好的包，直接拿了用就好了。

安装流程

这里我就是看网上的下载流程，多的很，主要是配置一个全局的文件夹和缓存文件夹还有配置两个变量，以及改成镜像的地址，网上流程很多。
nodejs安装教程
安装最新版本npm (视频上是在git上使用npm命令的)
在这里插入图片描述
此时再去git里看就可以使用npm命令了
在这里插入图片描述
然后我在git里下载了一下脚手架，命令：npm install @vue/cli -g(后面的-g表示是可以全局使用)
在这里插入图片描述

在vscode使用nodejs命令前的一个问题

在学习使用脚手架的时候，在nodejs和vue脚手架的配置上还是有点麻烦的，想到这些配置就难受，遇到的第一个问题就是如何解决在vscode上使用脚手架，
先要下载nodejs，然后在git上配置全局 npm安装全局CLI
本以为可以使用了，然后发现不行
解决VSCODE"因为在此系统上禁止运行脚本"报错
借鉴这篇博客之后就真的成功了，就很开心
在这里插入图片描述

使用脚手架步骤

在这里插入图片描述

在这里插入图片描述
coderwhy里面多一步这个，是问他需不需要配置镜像，而我的node一开始配置的变量就是淘宝的镜像，所以没有这个提问。
在这里插入图片描述
1.先在vscode查看是否安装成功
2.使用Vue create 项目名来创建项目，注意要用下划线
3.选择用vue3、vue2还是手动选择新特性（preset： 预测），这里选择手动配置
在这里插入图片描述
4.目前只用到Babel（Babel是一个JavaScript编译器，主要用于将采用ECMAScript 2015+语法编写的代码转换为向后兼容的JavaScript语法，）其他的像什么路由目前都用不上，后面就可以选中。
点击空格选中，a全部选中
在这里插入图片描述
5.选择3.x版本 学的vue3
在这里插入图片描述
6.选择把babel等东西放到哪里，独立的配置文件还是package.json（选择独立的，因为方便配置）
在这里插入图片描述
7.要不要把你之前生成的东西弄成一个预测，后面直接用，不用自己一点点手动弄了
在这里插入图片描述
我选择yes，所以输入一个preset名称我设置为vuedemo就好了
在这里插入图片描述
项目就创建成功
在这里插入图片描述
成功啦，成功的样子就是这样的
在这里插入图片描述

CLI项目结构解析（必须要掌握）

在这里插入图片描述
jsconfig.json是给vscode用的。components用来存放组件

package.json

package.json中包含了运行项目需要的module，是打包配置文件，要理解
进入package.json查看
vue-cli-service是对webpack进行了一个封装
serve是启用本地服务，bulid是打包项目
在这里插入图片描述
输入前要进入项目目录cd一下(也可以在文件目录那里点击在集成终端打开)
（这里就真的和linux命令一样啊，应该是因为nodejs是用作服务器环境的原因，所以都用这样的命令。）
输入npm run serve 就会自动帮我们打包当前项目并启动本地服务（在这里也可以看到nodejs是用作服务器的）
在这里插入图片描述
第一次打包会比较慢，要耐心等待一下
成功了，看到熟悉的8080端口，就真的是服务器发布啊家人们！
在这里插入图片描述

.browserslistrc用于浏览器适配

了解一下就行了，一般是用默认的
在这里插入图片描述
main.js是主文件

真实的组件使用

要导入然后再注册才可以使用
牢记：
传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
在这里插入图片描述

vue里的export和import

vue里的export default
export命令对外接口是有名称的，且import命令从模块导入的变量名与被导入模块对外接口的名称相同。
而export default命令对外输出的变量名可以是任意的，这时import命令后面，不使用大括号。

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。
所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

jsconfig.json说明（为什么是给vscode使用）

这里就需要webpack的知识
了解这块，但是后面特别有用，为了给代码更好的提示
在这里插入图片描述
配置路径的别名，这里有一个问题，就是在写路径别名utils的时候没有提示，vscode 并不知道你在webpack中配置的别名，所以此时需要在jsconfig.json中进行配置，让vscode知道，这也是它为什么是用来配置vscode的原因
在这里插入图片描述
在里面去配置utils的路径，所以就可以自动识别
在这里插入图片描述

VUE不同版本对template的处理（了解）

我听的有点蒙
vue整个的渲染过程
在这里插入图片描述
所有的template都要进行渲染的过程
在这里插入图片描述
webpack对vue文件的处理，会直接给你转化
在这里插入图片描述
如果不是vue文件，webpack没有进行处理，则需要vue源码来进行处理
在这里插入图片描述
官方文档说的比较简洁
在这里插入图片描述

在这里插入图片描述

看完了，就是template的编译究竟是vue源码来做，还是vue脚手架中的vue-loador来帮你做的区别，调用的vue是不同，这是vue底层的东西
在这里插入图片描述

vscode插件

volar对vue3支持比较好
在这里插入图片描述

新的开发模式

在这里插入图片描述
要进行开发思想的转换，后面就是写各个组件，以及由各个组件和根组件构成的组件树
因为是webpack打包后，所以main.js是入口（这里要学一学webpack）

单文件style的作用域问题

确实是一个问题，它是全局的作用域，所以要加上一个东西
在这里插入图片描述
要在每个单文件的style里加上scoped
在这里插入图片描述
内部原理：是在每个单文件的修饰的元素上加上一个标识号，就可以知道修饰的是谁了
在这里插入图片描述

vue报错“‘vue-cli-service‘不是内部或外部命令，也不是…”的解决办法（主要是导入其他人的项目会遇到）

遇到了之前的波行的兄弟的回答，写的很好
就是先npm install一下，这个命令是安装依赖（node_modules是依赖,没有它就无法运行，所以以后运行前也可以注意看一下）
vue报错“‘vue-cli-service‘不是内部或外部命令，也不是…”的解决办法

vite创建vue项目

输入npm init vue@latest之后开始创建项目
打包效率极高
在这里插入图片描述
输入命令之后，就按照提示一步步的从项目名到项目需要的各种插件，非常的简洁明了，这一点上要比脚手架好用
在这里插入图片描述
然后就按照他给的提示一步步来输入，先切换到项目目录，然后安装依赖（npm install），以及是run dev不是serve，就运行成功了
在这里插入图片描述
成功后的界面
在这里插入图片描述

在vite上的配置和脚手架有些区别，整体上感觉更加合理。
在这里插入图片描述
以及最后在项目删除的时候发现脚手架的项目里面东西很多，vite就少很多

快乐本乐
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
推荐几个值得学习的脚手架项目
xxxxxx__xxxxxxx的博客
12-16 2130
后台管理项目-JeeSite(ssm项目) 商城类项目-微同商城(微信小程序) 秒杀类项目-spring-boot-seckill(秒杀案例合集) 支付类项目-roncoo-pay(详细) 综合平台类项目-Cloud-Platform(脚手架) 1、后台管理项目-JeeSite(ssm项目)   Java快速开发框架，基于经典技术组合（Spring MVC、Apache Shiro、MyBatis、Bootstrap UI），包括核心模块如：组织机构、角色用户、权限授权、数据权限、内..
vue项目实战（一）之vue-cli脚手架搭建项目
abcwanglinyong的博客
10-17 4722
首先假如你已经安装了node和npm,如果没有的话自己百度安装一下。 如果感觉npm下载速度慢，可以使用淘宝镜像cnpm,链接地址： http://npm.taobao.org/ 安装cnpm 方式一： npm install -g cnpm --registry=https://registry.npm.taobao.org 方式二： alias cnpm="npm --...
2024年Web前端最全Vue脚手架搭建以及创建Vue项目流程_脚手架创建vue项目，Web前端技术类校招面试题汇总
最新发布
2401_84122782的博客
05-11 870
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】node_cache和node_global是后面创建的文件夹，后面有讲到，创建的位置，我在这里放到了node.js文件夹下，也可以自定义文件夹路径。
Java中如何快速构建项目脚手架
smilehappiness的博客
05-29 4782
文章目录1 前言2 微服务项目准备3 脚手架构建3.1 项目正常启动 && 测试用例正常3.2 在pom中加入以下maven插件配置3.3 执行archetype插件3.4 执行安装命令4 基于脚手架生成新的项目4.1 添加脚手架4.2 创建新项目 1 前言 项目中，目前主流的当然是微服务项目。为了应对高并发，以及保证自己的服务比较稳定，通常会把服务按照模块，或者具体的业务划分为多个独立的微服务，那么如果一个一个去创建每一个微服务项目，感觉在做重复的事情，而且容易出错，所以笔者就自己搞了一个
Vue脚手架及组件的使用
2302_76703265的博客
01-02 937
在 Vue 中，组件是可复用的 Vue 实例，其中包含了 HTML、CSS 和 JavaScript 代码。通过组件，我们可以将一个大型应用拆分成多个小型、易于管理的部分，并且可以重复使用这些部分。
关于前端Vue脚手架的完整搭建
m0_57254953的博客
06-16 1037
简述了Vue脚手架搭建的过程
vue-demo——脚手架.zip
12-02
通过学习和修改这个脚手架项目，可以迅速掌握Vue的开发流程，并以此为基础构建自己的项目。 总之，Vue.js提供了强大的框架和工具，使得前端开发变得简单而高效。Vue Demo脚手架是一个很好的起点，帮助开发者快速...
vue脚手架——axios
03-30
Vue脚手架——axios Vue.js 是一套构建用户界面的渐进式框架，它的官方网址是 https://cn.vuejs.org/index.html。Vue.js 将必要的页面元素的相关属性（例如页面元素的样式、控件的值、页面元素的事件等）与数据进行...
使用vue-cli脚手架工具搭建vue-webpack项目
10-17
Vue官方提供了一个强大的脚手架工具——vue-cli，它可以简化项目的初始化过程，帮助开发者快速搭建项目结构。 首先，搭建VueWebpack项目的第一步是确保你已经安装了Node.js环境。Node.js是JavaScript的服务器端运行...
vue脚手架 node-> npm-> cnpm-> Webpack-> vue-cli 脚手架 -> elemet -ui
09-15
在开发过程中，为了提高效率，我们通常会使用Vue的官方脚手架工具——`vue-cli`，它可以帮助我们快速搭建项目结构，集成Webpack等构建工具，以及预设好一系列开发和生产环境的配置。 首先，让我们从基础开始，了解`...
Vue脚手架记事本案例
10-03
总结TODOList案例： 组件化编码流程： ... 2.实现动态组件：考虑好数据的存放位置，数据是一个组件在用还是一些组件在用： ...props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
vue创建脚手架项目
m0_62181310的博客
06-14 6139
@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目目录一、创建脚手架项目1.全局安装命令2.查看vue脚手架版本3.@vue/cli 创建脚手架项目-启动3.1 创建项目3.2 选择模板3.3 回车生成文件3.4 进入项目启动文件 二、vue脚手架文件说明1.目录和代码分析2.主要的3个文件和关系 三、vue/cli自定义配置1.自定义服务配置2.eslint暂时关闭设置 四、单vue文件开发五、清空脚手架欢迎界面 2.查看脚手架版本 如果出现版本号就安装成功
Vue脚手架入门基础
dyr_080508的博客
03-31 2350
Vue脚手架入门
Vue脚手架搭建项目【小白看了都会】
m0_67372185的博客
11-20 1147
新手小白搭建vue项目
vue.js之路(1)——vue-cli脚手架的搭建
热门推荐
YuuyaRin的博客
01-03 3万+
相比于主流的angular和react前端框架，vue在近年来也变得非常火热。他吸取了前两者的优点，同时学习曲线也更加平缓。所以本魔王准备入坑了~~ 首先从vue的脚手架搭建开始吧。 这里不得不吐槽，window相对mac和linux确实在软件开发方面，非常不方便，代码打包，环境搭建等，简直爆炸~~..然而，嗯，本魔王就是在用win10，哎~ 嘛，废话不多说，今天的任务就是把脚手架搭好，虽然
使用vue-cli脚手架搭建vue项目。（webpack）
id_no_chinese的博客
06-01 2140
注：本文不介绍vue语法。只是个从零搭建vue的demo。1.首先是环境搭建。配置好node环境。全局安装vue，vue-cli.这里就不做介绍了。2.使用vue-cli初始化项目。vueTemplate是项目名称。vue init webpack vueTemplate后面有一连串的输入，包括作者，项目头是否启用测试等。按照个人要求输入就好。项目初始化完成后的项目目录如下：3.启动服务  到项目...
Vue（八）vue脚手架
qd520_1314的博客
04-25 2020
a.先决定要把项目文件夹保存在哪个位置； b.然后在整个文件夹的位置，shift+鼠标右键打开power shell窗口，运行：vue create 自定义项目名；系统出现提示后按照以下过程进行选择： 1）? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) > Manually select features 2）? Check the
vue脚手架搭建
weixin_45784564的博客
06-23 1877
先从node官网下载并安装node.js,安装node.js的作用就是利用npm资源管理器下载插件等。 官网地址: https://nodejs.org/en/ 把下载的.exe文件双击安装，一直下一步即可。安装好的node试一下查看是不是安装成功,window键+r输入cmd进入系统管理器进入系统命令页面输入 node -v 检查是否安装成功 npm包管理器，是集成在node中的，所以安装了node也就有了npm，有了npm就可以去下载资源库文件，可以通过命令进行下载，先查看一下npm的版本号。 输
项目内的脚手架 plop
weixin_44811288的博客
08-03 418
一般在项目中我们都会使用cli脚手架, 三大框架又各自拥有自己的脚手架,对我们构建一个项目省了很多力气,然而在开发中能少一步操作就少一步这是一名程序员所共有的特质… 相信大家在开发期间一定都经历过频繁的创建文件夹,创建文件,而大部分的文件的配置上又存在很多相同的代码(这些代码不能删除) 那么我给大家安利一个工具,希望可以帮助到大家快速的构建重复的文件代码 1. 首先我们要安装依赖 npm install plop 2. 根目录下创建一个plopfile文件 [外链图片转存失败,源站可能有防盗链机制,建议将
创建vue脚手架项目
09-04
创建Vue脚手架项目是通过使用vue-cli这个工具进行的。vue-cli是一个对Vue项目构造做了封装的脚手架工具，它可以帮助我们快速创建Vue项目，并且自动完成一些常用的配置，省去了手动配置webpack的过程。 下面是创建Vue脚手架项目的一些步骤： 1. 首先，你需要安装Node.js和npm，因为vue-cli是基于Node.js的命令行工具。 2. 安装vue-cli：通过运行命令`npm install -g @vue/cli`来全局安装vue-cli。 3. 创建项目：使用命令`vue create project-name`来创建一个新的Vue项目，其中project-name是你自己定义的项目名称。 4. 根据提示进行配置：在创建项目的过程中，你可以选择手动配置或者使用默认配置来初始化项目。你可以根据自己的需要进行选择。 5. 安装依赖：创建完成后，进入项目目录并运行`npm install`命令来安装项目所需的依赖。 6. 启动项目：安装完成后，可以通过运行`npm run serve`命令来启动开发服务器，然后在浏览器中访问http://localhost:8080来预览你的项目。 在创建完成后，你可以在生成的项目中找到一些由脚手架自动生成的文件，如App.vue和main.js。这些文件是构建Vue项目的基础，你可以在其中编写组件和配置项目的入口文件。 总结来说，通过使用vue-cli工具，你可以快速创建并初始化Vue项目，省去了手动配置的繁琐过程，让你能够更专注于开发自己的应用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [VUE——使用VUE脚手架创建项目](https://blog.csdn.net/weixin_68567820/article/details/125379407)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [基于脚手架创建Vue项目实现步骤详解](https://download.csdn.net/download/weixin_38550605/12924495)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值