从零开始搭建一个vue demo工程

已于 2023-01-11 13:55:56 修改
阅读量575 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2023-01-10 13:04:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cn_lyg/article/details/128627302
版权
文章介绍了如何使用vue-cli和vite创建Vue项目，提到了Vue2和Vue3的代表作，如vue-element-admin和vue-admin-template，并讨论了Vite可能对webpack的替代趋势。同时，列举了相关参考文章和热门Vue开源UI库。
摘要由CSDN通过智能技术生成

查询了不少文章，有知乎、CSDN、简书、思否等，发现如下操作性比较好，特此记录

目录

使用vue-cli创建

使用vite创建

Vue2和Vue3的代表作

参考文章

使用vue-cli创建

Vue3-使用@vue/cli搭建项目 - 个人文章 - SegmentFault 思否

此处使用了vue-cli（基于webpack）来搭建工程，随着vue3的发布，事实上另一种打包工具Vite（基于es6）也逐渐流行起来，并逐渐被人认可（包括尤溪雨本人，他甚至认为会取代webpack方式），此处也找了Vite创建vue demo的文章，操作性也是比较强的

使用vite创建

使用使用vite创建vue3项目 - 掘金

这个教程只能创建vue3应用，而且总体结构上比较简单

Vue2和Vue3的代表作

事实上，我们很少通过从零开发一个vue工程，毕竟工程量还是挺大的，需要方方面面都考虑。在Github上有不少Star数量很高的开源项目，也是大多是公司甚至是个人的选择。我们直接搜索“Vue admin” 按Star排序，可以看到很多优秀的开源项目，以我的经验，认为选择下图两个库是比较好的学习蓝本。 

 

  •  git@github.com:PanJiaChen/vue-element-admin.git
  • git@github.com:PanJiaChen/vue-admin-template.git
  • git@github.com:chuzhixin/vue-admin-better.git

参考文章

Vue3-使用@vue/cli搭建项目 - 个人文章 - SegmentFault 思否

使用vite创建vue3项目 - 掘金

Vite创建Vue3项目_51CTO博客_创建vue3项目

Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗？ - 卡拉云

12 款最棒 Vue 开源 UI 库_vue ui库_代码有毒。。。的博客-CSDN博客

cn_lyg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实战入门基础篇：从零开始仿门户网站实例
03-13
本教程“Vue实战入门基础篇：从零开始仿门户网站实例”旨在帮助初学者快速掌握Vue的核心概念，并通过实际项目演练提升技能。 在学习Vue时，首要的是理解其核心组件系统。Vue采用组件化开发模式，允许开发者将复杂...
【vue系列-01】vue初级入门以及demo实现详解
zhenghuishengq的博客
12-16 8450
vue的初级入门以及代码实现
一个vue小demo代码介绍
左直拳的马桶_日用桶
10-15 1335
上篇文章说道，前段时间忙里偷闲，试了一下vue，搞了个小demo作为练习。原本以为很简单，但实际上耗费时间超出我的想象。如果有客观原因，是vue有自己的私货，另外一个就是缺乏完整的示例，帮助文档搞成手册形式，例子很少，即使有也是支离破碎。再就是所谓免费开源的东西，内容和版本都有点随心所欲，很容易就不被支持，玩似的。 闲话休提。先给出demo的样子。demo很简单，就2个页面，再加一个弹窗，但麻雀虽小，demo里也包含了母版页，部件，路由，以及使用了jquery和国产界面框架layUI。 一、成果 1、首页
Vue Demo 项目指南
最新发布
gitblog_00722的博客
08-10 313
Vue Demo 项目指南 vue-demoVue.js 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释，让您快速上手 Vue.js 开发 SPA。Webpack / ES6 + Babel / Vue Router / (Vue Resource?) / (Vue Validator?) / (Vuex?) —— An Excellent Vue Starter with Best...
通过一系列vue-demo入门vue2
xiuxialala的博客
04-18 612
【代码】通过一系列vue-demo入门vue2。
vue-demo示例
热门推荐
zpcqdkf的博客
05-31 2万+
Vue-cnodejs - 基于vue重写Cnodejs.org的webappNeteaseCloudWebApp - 高仿网易云音乐的webappvue-zhihu-daily - 知乎日报 with Vuejsvue-wechat - vue.js开发微信app界面vue2-demo - 从零构建vue2 + vue-router + vuex 开发环境eleme - 高仿饿了么app商家详情...
Vue基础入门小demo——记事本
黛琳ghz的博客，期待你的关注。
01-08 1万+
记事本（不是操作系统的那个记事本，是一个简单的网页版本记事本）是一个较全面的Vue指令集合案例，在你学习完大部分基本的v-指令后（如v-model），你可以写这个记事本案例，来熟悉和巩固v-指令的使用方法，记事本这个案例是一个功能比较齐全的小demo，是一个不错的练手案例。
easyui_demo_DEMO_easyui的一个demo_easyui_
09-29
这为开发者提供了一个起点，使得他们能够更便捷地实现界面设计，而不必从零开始创建所有的 UI 元素。 标签 "DEMO"、"easyui 的一个 demo" 和 "easyui" 更进一步强调了这个压缩包的内容是与 EasyUI 相关的示例代码或...
一个空白的vue工程
08-03
在“一个空白的vue工程”中，我们主要讨论的是如何从零开始搭建一个Vue项目，并解决与旧版浏览器（如IE）的兼容性问题。 首先，创建Vue项目通常需要借助Vue CLI（命令行界面），它是一个官方提供的工具，可以快速...
angular学习之从零搭建一个angular4.0项目
12-01
在本文中，我们将深入探讨如何从零开始搭建一个基于Angular 4.0的项目。Angular是一个流行的前端开发框架，由Google维护，它提供了强大的功能来构建动态和交互式的Web应用程序。随着版本的快速迭代，Angular 4.0带来...
Vue创建Demo项目
weixin_41924879的博客
02-01 1539
Vue创建Demo项目
从零开始搭建一个vue项目（保姆级教程）
weixin_50989469的博客
07-23 5128
我这边在本地起了一个后台服务（建议后台服务做好跨域配置），模拟接口访问调用，一共测试了三种方式：①get无参请求 ②get有参请求 ③post请求json传参。新建api文件夹，放在api文件夹下，需要引入http文件，js文件地址：src/api/pageB.js。项目建好之后，就可以配置ui组件了，可以选择npm去装，也可以选择yarn安装，我把两个命令都列出来了。第二步，选择【Vue.js】，输入自己项目的名称，点击【Create】生成项目。在main.js中import之后，ui组件才正式生效。
Vue实现的一个简单的Demo
justdoit936的博客
11-08 643
一个你可以看得懂的Demo 二话不说先看效果！ 解释一下吧，实现的效果！Punch可以控制红色进度条，Restart就是重新开始。嘻嘻嘻~~~~~，进度条小于等于0时颜色发生Turn down… 懂的都懂！！！ 是时候上才艺了： HTML代码 <div id="app"> <div class="bug" :class="{turn:use}"> </div> <div class="bottom"
在线演示前端demo | github如何搭建个人vue项目进行展示
weixin_42974827的博客
09-18 3114
github提供免费的在线网站服务，免费托管代码服务，不需要我们花钱，就可以在线通过网络展示我们前端的项目，前提是我们要把vue项目打包部署在github上，就需要建立一个仓库。个人在线演示：Vite App后续会教大家如何做手机端和pc端的一套代码适配方案。
搭建vue项目环境以及创建一个简单的vue的demo
weixin_39643007的博客
05-08 1604
一、vue-cli脚手架的搭建步骤 1.首先，确定你的电脑上已经安装了nodejs，可以使用npm包管理器安装环境，如果还没有安装node环境，则需要安装node.js 这个很简单 默认点击安装完成即可 这里不不做演示了 2.创建一个项目存放的文件夹目录，然后进入到该目录下 按Shift+鼠标右键点击在此打开PowerShell窗口，此时可使用node -v检查node的版本，如...
vue vuex 学习小demo，已有千人收藏
2401_83621095的博客
03-30 706
count:0,},//方法 接收参数为state中的数据},},},},//如果actions里面想要修改store里面的数据，只能通过commit去触发mutations里面的方法//不能直接修改//context.commit(‘add’)触发mutations里面的方法变成异步actions:{},2000)},},2000)},},//用于对store里面的数据进行加工处理形成新的数据//store中的数据变化之后，getter包装中的数据也会跟着变化。
简单的vue小demo——小黑记事本
tingfe的博客
04-19 954
简单的vue小demo——小黑记事本 整体效果：完整代码在这里 一个简单的记事本，可实现简单的添加，删除，统计，清空，隐藏。 1.新增 1.1生成列表结果（v-for数组） 1.2获取用户输入（v-model） 1.3回车，新增（v-on，.enter） 具体实现： <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" //双向绑定
适合初学者练习的vue小Demo
m0_50789201的博客
05-28 874
我在学习vue的第四天时跟着视频练习了一个github搜索的案例，这个案例是使用消息订阅与发布进行组件间通信的，然后是使用axios库进行请求。 案例项目目录构建： 在这之前要下载PubSub JS库，axios库 npm install --save pubsub-js //ajax请求中常用的两个库 npm install vue-resource --save npm install axios --save 一：入口文件main.js import Vue from 'vue
从零开始创建Vue工程：环境搭建与常见问题解决
本文将从零到一详聊创建 Vue 工程的过程，并讨论在创建过程中遇到的常见问题。 **环境搭建** 在创建 Vue 工程之前，需要准备好必要的开发环境。首先，需要安装 Node.js 10.15.3 及其包管理工具 npm。Node.js 是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值