Vue脚手架的使用

于 2022-05-17 01:35:11 发布
阅读量237 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40733968/article/details/124695400
版权

提示：本文主要对Vue-cli脚手架进行总结

文章目录

前言

提示：这里可以添加本文要记录的大概内容：

	我们已经学习了Vue里的组件化，在里面我们知道，组件一般要配合脚手架vue-cli来使用，
本篇文章将对	vue的脚手架进行总结

提示：以下是本篇文章正文内容

一、创建Vue脚手架

1、初始化脚手架

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、具体步骤

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、分析脚手架结构

1、根目录下的文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、src

2.1 main.js

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 app.vue

在这里插入图片描述

3、public

3.1 index.html

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、render函数

先去掉render函数，按照我们自己的的逻辑注入组件，发现报错

在这里插入图片描述

在这里插入图片描述
验证
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.1 使用完整版vue

在这里插入图片描述
在这里插入图片描述

4.2 引入残缺版vue，使用render函数

1、验证

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

验证2

在这里插入图片描述

验证3

在这里插入图片描述

在这里插入图片描述

简写

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.3 总结

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、修改脚手架的默认配置

脚手架依靠webpack实现功能

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

修改默认配置，需要vue.config.js

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

关闭语法检查

在这里插入图片描述
在这里插入图片描述

四、文件架构

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、ref属性

在这里插入图片描述
在这里插入图片描述

如果给一个组件加上ref，会输出什么呢？

这里的this.$refs.sch 是School组件的vc

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六、props配置

1、简单实现

在这里插入图片描述
在这里插入图片描述

2、限制传参

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、完整props

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

4、尝试修改年龄

在这里插入图片描述
在这里插入图片描述

5、总结

在这里插入图片描述

七、mixin混入

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

全局混入

在这里插入图片描述
在这里插入图片描述

八、插件

8.1 实现步骤

vue里的插件本质就是对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8.2 插件的功能在这里插入图片描述

8.3 总结

在这里插入图片描述

九、scoped样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

pigpigpi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue开发项目入门——Vue脚手架
m0_67495466的博客
04-12 3万+
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程。
VUE脚手架具体使用方法
10-16
主要介绍了VUE脚手架具体使用方法，vue-cli这个构建工具大大降低了webpack的使用难度，小编觉得不错，下面就一起来了解一下具体使用方法
VUE.JS-props声明接收
XiaoSen207的博客
11-29 289
<template> <div> <h1>{{msg}}</h1> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <h2>学生年龄：{{myAge+1}}</h2> <button @click="updateAge">尝试修改收到的年龄</button> </div> </tem
Vue 脚手架-基本使用
FellAsleep的博客
02-19 4063
1.脚手架-介绍与安装 webpack自己配置环境繁琐官方提供脚手架, 快速搭建项目基础结构 安装@vue/cli全局模块包, 得到Vue命令, 用于以后创建Vue脚手架项目 步骤: 1.全局安装@vue/cli模块包 yarn global add @vue/cli 或者 npm install -g @vue/cli 2.查看版本号 vue -V 2.脚手架-创建项目-启动服务 步骤: 0.新建项目文件夹在 窗口执行cmd命令 1.创建项目: vue cr
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
热门推荐
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
在使用vue脚手架之前你必须掌握的:vue的模版以及路由用法
keader01的博客
07-10 8290
有的同学在学习中陷入了迷茫，在不清楚知识体系的情况下乱学一通，最后导致了基础会一点，后面的知识大概了解 就是没法彻底掌握，所以在这里希望大家如果有陷入vue迷茫的小伙伴不要过早的使用vue脚手架 先把vue中核心的地方弄懂 在阅读此文章之前保证你学会了作者之前发布的文章内容， 或者你自己了解其他方式实现的以下内容： 1.webpack项目搭建技巧 2.常用的webpack的各种load
Vue脚手架的简单使用实例
10-18
主要介绍了Vue脚手架的简单使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue脚手架及vue-router基本使用
08-27
主要介绍了vue脚手架及vue-router基本使用，非常不错，具有参考借鉴价值,需要的朋友可以参考下
vue脚手架搭建过程图解
08-27
vue脚手架是个好东西，能够快速搭建vue单页面应用，vue是基于node环境的，所以要先安装node。下面通过图文并茂的形式给大家介绍vue脚手架搭建过程图解，感兴趣的朋友一起看看吧
怎么安装vue脚手架(vue-cli)，并使用脚手架创建项目
bigpatten的博客
05-12 4317
所谓脚手架就是指用来快速生成项目结构的工具，Vue脚手架工具就是一个快速生成Vue项目结构的命令行工具，可以极大的方便我们快速创建项目。目前最新的脚手架工具版本是4.x 安装脚手架工具 # 安装vue cli 4.x npm i -g @vue/cli # mac下可能要加sudo sudo npm i -g @vue/cli # --unsafe-perm 的作用请参考最后的附加内容 sudo npm i -g @vue/cli --unsafe-perm 安装成功后可以使用下面命令检测是否安装成功：
详解如何使用vue-cli脚手架搭建Vue.js项目
01-19
1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程： $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明。 2. 安装 前提条件，Node.js >=4.x版本，建议使用6.x版本。npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init <template> <project> vue官方提供了多
【Vue】脚手架的一些个介绍
Superman_H的博客
02-09 3364
# 脚手架 - 脚手架 Vue CLI：用于快速生成 Vue 项目 - 安装 Vue CLI：`npm i -g @vue/cli` - 查看 Vue CLI 版本：`vue -V` - 创建项目：① `vue create project-name`、 ② `cd XXX` 进入项目所在目录、 ③ `npm run serve` 运行项目 # 项目创建过程 1. `vue create vue-demo` 创建 Vue 项目 vue-demo 2. Please
使用vue-cli脚手架搭建vue项目。（webpack）
id_no_chinese的博客
06-01 2132
注：本文不介绍vue语法。只是个从零搭建vue的demo。1.首先是环境搭建。配置好node环境。全局安装vue，vue-cli.这里就不做介绍了。2.使用vue-cli初始化项目。vueTemplate是项目名称。vue init webpack vueTemplate后面有一连串的输入，包括作者，项目头是否启用测试等。按照个人要求输入就好。项目初始化完成后的项目目录如下：3.启动服务  到项目...
Vue环境搭建和脚手架的使用
qq_41853447的博客
01-03 312
Vue环境搭建和脚手架的使用 安装环境 需要 Node.js 8.9+ (推荐 8.11.0+) 一、安装nodejs 1.1、下载 英文地址：https://nodejs.org/en/download/ 中文地址：http://nodejs.cn/download/ 、 1.2、安装 安装 直接双击下载后的安装包。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yBVYbWn5-1609645000940)(C:\Users\stars\AppData\Roam
vue-cli脚手架的使用
归零
06-03 119
一、vue-cli是vue的一个脚手架，通过再控制台中输入npm install vue-cli -g对vue-cli进行全局安装，一般由于使用npm会比较慢，所以常使用的是cnpm命令：cnpm install vue-cli -g以下是安装过程的截图：接着通过下列语句来初始化先进入项目目录，接着输入npm run dev：在这里我遇到了一个问题，这里已经显示成功了，但是浏览器没有自动开启页面，...
使用vue脚手架和element-ui使用
qq_42964711的博客
05-22 539
Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。 安装3.x版本的Vue脚手架： npm install -g @vue/cli 基于3.x版本的脚手架创建Vue项目： 使用命令创建Vue项目：vue create my-project 选择Manually select features(选择特性以创建项目) 勾选特性可以用空格进行勾选。 是否选用历史模式的路由：n ESLint选择：ESLint + Standard config 何时进行ESLint语法校验：Lint o
vue.js 脚手架安装
tjjucheng的博客
08-10 1万+
一、搭建环境 1、 安装nodejs （网址：https://nodejs.org/en/） 直接网上找下载就好。建议用推荐版本(8.11.3)。安装过程很简单，一路“下一步”就可以了。安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。安装成功后npm同时安装完成。 2、安装淘宝镜像 npm install -g cnpm --re...
VUE2.0学习笔记（一）：VUE-CLI 脚手架
Aubrey's blog
01-29 4312
个人理解：搭建vue-cli vue脚手架的作用是，写的项目可以通过webpack 快速打包，加密代码，避免源码泄露。脚手架的搭建步骤（摘录自技术胖博客：点击打开技术胖博客）：1、前提：安装了npm（在终端可以用npm -V检查版本）2、打开终端，在当前文件夹下执行命令： npm install vue-cli -g    (-g代表全局安装）3、终端运行命令： vue init &lt;temp...
vue脚手架使用scss
最新发布
07-27
你可以使用Vue脚手架来使用SCSS（Sass）预处理器。下面是一些步骤： 1. 确保你已经安装了Vue脚手架。如果没有安装，你可以通过运行以下命令来全局安装Vue CLI： ``` npm install -g @vue/cli ``` 2. 创建一个新的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值