Vue使用vue-cli基于脚手架编写项目_自己编写一个vue基本项目_认识项目结构---vue工作笔记0019

最新推荐文章于 2024-06-28 10:13:21 发布
最新推荐文章于 2024-06-28 10:13:21 发布
阅读量415 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端UI&后端&分布式
本文为博主原创文章，未经博主 添柴程序猿 允许不得转载 违者追究法律责任。
本文链接：https://blog.youkuaiyun.com/lidew521/article/details/115168407
本文介绍了如何使用vue-cli创建一个基础Vue项目，包括项目名称修改、目录结构解析、关键配置文件的作用，如webpack、.babelrc、.eslintrc.js等。同时讲解了.gitignore、index.html、main.js、App.vue等文件的功能，强调了组件的基本结构和eslint的配置。最后，通过创建自定义组件和模板展示了Vue项目的实际操作流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上面是我们用vue-cli生成的一个基础项目

可以看到名字是VueDemo

我们打开package.json

VueDemo基于驼峰命名,所以这里我们改成name是vue-demo

然后我们去看看他的结构

首先去看看这个build文件夹,可以看到里面有个

webpack.base.conf.js

有个dev的,有个prod,就是在不同的环境下,使用webpack打包的配置文件

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue教程｜搭建vue项目｜Vue-CLI2.x 模板脚手架
baidu_21035953的博客
11-29 1499
通过实战方式，介绍基于Vue-CLI2.x 模板脚手架搭建vue2.x项目的完整构建过程，从环境搭建、脚手架搭建到脚手架构建项目，另外分享了工程结构各文件的具体用途，方便大家了解和掌握
Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 5206
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
使用官方脚手架搭建的 vue.js demo 项目
10-23
这个是使用官方脚手架搭建的一个 vue.js 的 todolist 的项目，代码很简单，供参考
Vue基于脚手架编写项目
weixin_44552543的博客
07-04 449
**1.**创建副组件HelloWorld在compoments包下 <template> <div> <p class="msg">{{msg}}</p> </div> </template> <script> export default { data(){ return...
使用vue-cli脚手架搭建一个vue项目
XiaoHH的博客
09-14 546
首先你得下载一个nodejs，点击这里进入下载界面，安装步骤基本上全部点下一步就行。然后配置环境变量 然后配置环境变量 然后我们安装vue-cli脚手架，在cmd当中使用命令： npm install -g vue-cli 看到这个代表安装成功： 还有安装webpack： npm install -g webpack 然后来到一个目录使用命令创建项目(指明用webpack打包，用vue-cli-demo作为项目名) vue init webpack vue-cli-demo 配置如下： # 项目
用vue脚手架搭建一个demo
X北辰北的博客
04-16 643
概述 介绍过vue脚手架@vue/cli的安装和vue基础环境的安装之后，我们简单介绍了一下vue以及其应用的场景，但都是写一些基本的小段代码，跟真正运用到项目中来比的话还差很远，这篇文章就介绍下如何用脚手架搭建基础的项目demo框架。 操作步骤 1、新建一个文件夹，然后在此文件夹下运行命令行窗口，通过命令 vue create mydemo 来创建一个项目。 2、输入命令后会提示你选择一个present，默认即可，然后进入创建好的项目根目录，运行 npm run serve 命令.
vue 脚手架 firstDemo
七亿少女的劫丨
11-13 328
七亿少女的劫丨学习Vue js 2.0 第一天 学习Vue js 2.0 第一天 使用vue-cli（ 脚手架） 创建vue项目 目录结构： 主要关注src目录 Todos.vue 代码： &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;ul class=&amp;quot;list-group&amp;quot;&amp;amp;gt; &amp;amp;lt;li cla
使用 Vue-cli 脚手架创建项目
Sun_blog
07-14 2386
文章目录使用Vue CLI创建项目第一步，安装Node.js第二步，进入命令行第三步，安装脚手架工具第四步，切换目录第五步，创建项目总结 使用Vue CLI创建项目 本次以WIN10系统为例，其他系统略有差异。 第一步，安装Node.js Node.js官网 下载左侧的版本，根据提示安装即可。没什么特殊注意的情况，这里就不做演示了，安装过的同学可以跳过这一步。 第二步，进入命令行 按下键盘 WIN+R 键，输入 cmd 回车进入命令行。 安装过的同学，可以输入node -v 查看 node.js 的
使用Vue-cli脚手架创建uni-app项目（Vue2版本）
最新发布
m0_67584973的博客
06-28 1684
uni-app官方说除了HBuilderX可视化界面，也可以使用cli脚手架，可以通过vue-cli创建uni-app项目
Vue-Cli脚手架项目的搭建【新手快速入手】
2301_79258776的博客
05-06 2316
Vue CLI是官方提供的一套全面的开发工具链，可以帮助开发者快速搭建Vue项目。以下是使用Vue CLI搭建Vue脚手架的详细步骤。
vue脚手架基础demo1
红目香薰
09-19 559
vue脚手架基础demo1 bootstrap CSS样式引入 增删查demo bootstrap常用样式 template原型 demo1【template的声明以及使用】 demo2(自定义组件名称) demo3(自定义组件传参) demo4(子父组件传参) demo4(slot插槽使用)
初解vue脚手架vue-cli,及demo示例(一)
weixin_30663391的博客
04-24 371
vue-cli 脚手架总结 > 这一篇只解读了vue支持的webpack打包机的使用。之后会单独说webpack。 vue-cli是什么？ vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。 记住哦：快速建立项目，快速立项！快速立项！快速立项！(重要的事情有说三遍！！！) 那么什么是脚手架呢？官方是这么说的： “脚手架”是一种元编程的方...
Vue 搭建脚手架 Command vue init requires a global addon to be installed.
weixin_43644943的博客
11-09 706
Vue创建项目时，出现问题 解决方式 按照要求输入 npm install -g @vue/cli-init 安装成功后，即可正常运行
Vue-脚手架-项目创建方式
qq_38980678的博客
03-09 3033
一、什么是脚手架？ 1.Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 实现的交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的配置文件进行配置； 可以通过插件进行扩展。 一个丰富的官方插件集合，集
手把手教你如何创建vue脚手架项目（最详细！）
Baitgt的博客
10-18 9288
Vue-cli安装流程以及部分npm命令 百度Node.js下载并安装 可以一直下一步 但是要记住安装目录 进入安装目录即Node.js文件夹内 按住shift+鼠标右键 选择在此处打开命令窗口 输入node -v//检查node版本至少为4以上 输入npm config set registry http://registry.npm.taobao.org 输入npm install vue...
Vue框架项目实战整理：2、Vue项目搭建：使用vue-cli（vue脚手架）快速搭建项目（有图有真相）
鲁迷那的专栏—坚持实践后再写出来！
12-12 1358
声明：本教程不收取任何费用，欢迎转载，尊重作者劳动成果，不得用于商业用途，侵权必究！！！ 系列文章 Vue框架项目实战整理：1、Vue开发工具介绍、快速启动、常见错误 Vue框架项目实战整理：2、Vue环境搭建（有图有真相） Vue框架项目实战整理：3、Vue项目执行流程分析（一） Vue框架项目实战整理：4、Vue项目执行流程分析（二） 文章目录 1、安装 brew 2、安装 n......
C++代码实现 生成器模式
程序员の墨梅
04-28 4319
附一个编译当前目录下所有CPP文件的MakeFile 生成器模式 产品设计 生产 分配 生成器模式 生成器模式(Builder)不同于工厂模式(Factory): 生成器模式是通过一个生成器(Builder)生产出不同类型的产品,即通过设计出一个产品的每个部件(Builder的具体实现,如Dell_Builder),经过生产(Product)和组装(Di...
用vue-cli快速搭建vue脚手架+实现vue页面跳转的小demo
智者乐享 行者无疆
01-29 4309
文章首发于个人博客,转载参考请注明来源用vue-cli快速搭建vue脚手架+实现vue页面跳转的小demo 微信小程序的页面跳转和生命周期函数[一个简单的 vue 页面跳转示例项目地址
安装tb镜像
KLW75
06-05 664
1。 npm install -g cnpm --registry=https://registry.npm.taobao.org 2. npm config set registry https://registry.npm.taobao.org 配置淘宝镜像，并设置默认。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

添柴程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值