分析vue脚手架文件

最新推荐文章于 2024-04-29 19:47:37 发布
最新推荐文章于 2024-04-29 19:47:37 发布
阅读量186 收藏 1
点赞数
分类专栏： Vue2.x 文章标签： vscode vue.js react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amnesiac666/article/details/120007716
版权

在vue中需要引入babel插件，用于将ES6语法转化为ES5，在react中babel的作为还用于将JSX转化为Js
在这里插入图片描述
日常开发可以配置代码片段，这样每次创建.vue文件不用重复初始化一些东西

点击vscode左下角的设置图标，选择用户代码片段
在这里插入图片描述
可以新增用户代码或者查看已有的代码片段
在这里插入图片描述

在这里插入图片描述
在日常开发中，.vue文件包括三个部分：template、script、style
在这里插入图片描述

在main.js文件中引入app组件，引入vue.js，声明一个vue实例vm，挂载app组件到页面上
在这里插入图片描述
或者
在这里插入图片描述
脚手架中index.html文件的<%= xxx %>
相当于./public 路径
在这里插入图片描述
titile里的变量引用的是package.json文件里的name

在这里插入图片描述

在这里插入图片描述
运行结果：
在这里插入图片描述
但是注意，不能用中文，因为这个name同时还被作为包名
在这里插入图片描述
在这里插入图片描述

公孙元二
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端vue入门(纯代码)04---全网最详细的Vue脚手架入门
m0_62003092的博客
06-08 452
Ctrl + C或 Ctrl +shift + C【以管理员的方式运行】Vue CLI叫做脚手架。，翻译为命令行接口工具，俗称脚手架。:创建Vue项目:运行该Vue项目。
vue脚手架实现论坛功能，根据cnode开源api开发
05-24
首先，我们来看`vue脚手架`。Vue CLI允许开发者通过简单的命令行指令快速生成项目模板，包括基本的目录结构、配置文件以及必要的依赖。例如，`vue create my-forum` 将会创建一个名为`my-forum`的新项目，包含Vue.js...
Vue脚手架分析
李公子的博客
08-03 272
脚手架文件结构 ├──node_modules ├──public │├──favicon.ico:页签图标 │└──index.html:主页面 ├──src │├──assets:存放静态资源 ││└──logo.png ││──component:存放组件 ││└──HelloWorld.vue ││──App.vue:汇总所有组件 ...
vue脚手架文件
qq_41691865的博客
02-22 508
首先区要分脚手架版本：若安装了最新版本脚手架，想用老版本脚手架，创建vue2项目，需要拉取vue-cli2.x的模板才可以用！！ 1.拉取模板命令： npm install @vue/cli-init -g 2.vue init webpack vue-cli2test 1、项目名称：默认 ? Project name vue-cli2test 2、项目描述：默认 ? Project description A Vue.js project 3、作者信息：默认读取git信息 ? Author baijung
VUE 分析脚手架结构
weixin_47198950的博客
02-28 270
分析脚手架文件夹的结构 public/ 将来所有不需要编译，就可直接使用的js和css，以及图片都放在public下。放在public下的文件，都不会被再次编译。比如: imgs文件夹，唯一的完整的首页index.html，bootstrap.css，jquery-3.2.1.js, bootstrap.js 放在public下的不需要编译的css和js，都要在唯一完整的页面index.html中引入。 src/ 放的是所有自己写的代码 /assets 放自己编写的公共的css和js 例
Vue核心技术-35,.vue文件和脚手架工程简单分析
BraveWangDev
08-23 493
一,前言 前面使用Vue-cli创建了Vue工程脚手架并启动访问项目 在这个脚手架工程中,具备了Vue项目开发许多工程化的设置 例如: 使用了npm包管理工具及各种其他工具, 如eslint 通过node.js创建一个Vue项目服务供外部访问 使用了工程打包构建工具webpack,添加了工程需要的webpack插件 创建了标准的项目目录,初始化了标准配...
VUE 之 脚手架项目文件讲解
我的世界我的光彩
03-13 817
通常一个组件包括一个 .vue 文件和一个同名的 .js 文件，其中 .vue 文件是组件的模板文件，.js 文件是组件的逻辑代码文件。package.json：该文件是项目的配置文件，其中包含了项目的名称、版本号、依赖等信息。以上就是 Vue 脚手架项目中主要的文件和目录的讲解，它们共同构成了一个完整的 Vue 项目的结构。main.js：该文件是项目的主入口文件，其中主要的功能是初始化 Vue 实例并引入其他的依赖。App.vue：该文件是项目的主组件，其中包含了项目的主要视图和逻辑。
详解vue2.0脚手架的webpack 配置文件分析
12-11
作为 Vue 的使用者我们对于 vue-cli 都很熟悉，但是对它的 webpack 配置我们可能关注甚少，今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析 vue-cli 的简介、安装我们不在这里赘述，对它还不熟悉的同学可以直接...
Vue脚手架安装，分析
06-09
Vue CLI（命令行接口）是Vue.js的官方脚手架工具，它简化了项目初始化、配置和开发流程，让开发者可以快速搭建Vue应用。本篇文章将详细介绍Vue CLI的安装过程，并进行简单的组件分析。 首先，我们来安装Vue CLI。...
vue脚手架剖析
qq_72580318的博客
09-22 348
重点：搭建服务器，
Vue技术—脚手架文件结构
u013140948的博客
01-22 355
node_modules public |— favicon.ico:页签图标 |_ index.html:主页面 src |—— assets:存放静态资源 |_ logo.png |—— component:存放组件 |_ HelloWorld.vue |—— App.vue:汇总说有组件 |—— main.js:入口文件 .gitignore:git:版本管制忽略的配置 babel.config.js:babel的配置文件 package.json:应用包配置文件 README.
Vue脚手架
蓝朽的小世界
06-20 684
vue脚手架学习笔记1
Vue (七) --------- Vue 脚手架
在森林里麋了鹿
06-25 1460
Vue 脚手架概念与基本使用
Vue学习笔记|Vue脚手架
笔记|思路|总结
01-02 236
Vue脚手架
14-VUE的脚手架
m0_57262196的博客
04-09 984
ref属性1.被用来给元素或子组件注册引用信息(id的替代者)2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)3.使用方式：打标识：.... 或 获取：功能：让组件接收外部传过来的数据(1).传递数据：(2).接收数据：第一种方式（只接收）：第二种方式（限制类型）：props:{第三种方式（限制类型、限制必要性、指定默认值）：props:{
超详细的Vue脚手架
最新发布
m0_69266818的博客
04-29 1673
介绍了node.js、npm、webpack和vue-cli，element-ui的安装和使用，还有前后端项目分离
Vue-Cli - Vue 脚手架的创建 以及 目录结构说明
CYK_byte的博客
10-18 2885
f）这个问你是否进行单词校验，校验出错会有红色波浪线. 这里不需要，因为你可能会写很多特殊字符，因此输入 n 回车即可.之后他就会去构建项目了，如果此时出现了如下错误，说明你权限不够，要使用管理员的方式打开命令行，再执行上述步骤.b）接下来会问你项目描述是否叫（默认）："A Vue.js project". 如果不想改，直接回车即可.d）接下来会问你，是否采用运行 + 编译的方式，实际上就是是否要热部署的意思，直接回车即可.h）接下来问你是否要使用 npm 来管理项目，这个肯定是需要的，直接回车即可.
第二章：Vue脚手架
m0_61927991的博客
08-17 380
Vue尚硅谷(笔记二）
vue脚手架
weixin_45904557的博客
07-25 633
VueCLI是一个基于Vue.js进行快速开发的完整系统通过@vue/cli搭建交互式的项目脚手架。
vue脚手架main.js
08-09
- *1* *2* *3* [Vue学习第11天——分析Vue脚手架中的main.js文件](https://blog.csdn.net/Vest_er/article/details/126458827)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值