Vue项目初期搭建

从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建) 前言VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用vuejs作为前端框架,vuejs轻量、简单的特性使得前端开发变得更加简易,而基于vuejs的前端组件库也越来越多。我们今天使用的ElementUI,是饿了么团队开发的一款基于vuejs的前端组件库,也是众多vuejs组件库里面比较优秀的一款。这里要说一下我们构建网站所需要用到的一些东西: NodeJS(npm) Webstor 阅读详情

Vue项目初期搭建

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)(这里不需要做过多的解释,一直next就ok,傻瓜式的安装)
2安装好后在控制台输入这两个命令,打印出版本号,就说明安装成功了。(建议不要安装在C盘,具体原因不详,博主曾安在C盘一直报错,找不出原因,后换至F盘,一次就好)
3.创建Vue项目(先安装Vue脚手架)
①全局安装
npm install --global vue-cli
在这里插入图片描述
:如出现 warn 可以不用管它,(可能是因为node现在的版本废弃了一些用法),没出现 error 就可以一直向下执行。

4.创建一个基于Webpack模板的Vue新项目
在这里插入图片描述
demo 为项目的名字
在这里插入图片描述
(这是一张网上找的图,流程是一样的)

  • Project name (demo)-----项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。
  • Project description (A Vue.js project): ----项目描述,也可直接点击回车,使用默认名字
  • Author ----作者,输入你的小名
  • Install vue-router? (Y/n) 是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y”后回车即可。
  • Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,一般项目中都会使用。
    (后面的要么选第一个,要么选No)

项目结构

在这里插入图片描述
5. 创建完了之后会提示两个命令,照做就是了
在这里插入图片描述
进入到项目目录
在这里插入图片描述
启动项目
6. 功成
在这里插入图片描述

在浏览器输入localhost:8080,会出现一个Vue页面

希望留言

                                               H~2~O is是液体。
VueJS -- 使用vue+webpack搭建一个vue简单工程项目 创建VUE工程项目,我们可以使用vue-cli这款脚手架,但是这里面得一些细节被屏蔽了,如果你不清楚原生使用wepack配置的话,那么项目如果需要对vue-cli配置进行修改,可能你会无从下手。 我们先来看一下项目目录。 app里面放的是项目资源,index.js是入口文件 index.css是全局样式表 index.vue是最外面的父组件 components是一些组件 dist文件... 阅读详情

相关推荐

【零基础入门VUE】VueJS - 概述

不会对 DOM 进行更改,而是创建 DOM 的副本,该副本以 JavaScript 数据结构的形式存在。最终的更改会更新到真实的 DOM,用户将看到它的变化。随后,对两个 JavaScript 对象进行比较,并在真实 DOM 中更新最终的更改。Ember 添加了 glimmer 渲染引擎,旨在提高重新渲染性能,这与使用虚拟 DOM 的 VueJS 和 React 是类似的概念。随着时间的推移,淘汰赛的发展速度已经放缓。VueJS 继承了 Angular 和 React 的优点,并构建了一个强大的库。

共同学习、强我国家 1775

Sorry, name can no longer contain capital letters.

在使用vue-cli脚手架,vue命令创建项目的时候,报这个错,Sorry, name can no longer contain capital letters.,原因是因为创建的项目名称里面包含了,大写的字母,所以需要把大写字母改成小写的就可以了 ...

青烟小生的博客 1051

ubuntu20.04下dsp-slam的运行配置

DSP-SLAM:具有深度形状先验的面向对象的 SLAM

baidu_38431960的博客 3159

初始化VUE项目报错

安装过VUE脚手架,创建项目 vue init webpack vueDemoOne 报错Sorry, name can no longer contain capital letters 翻译了一下,意思就是项目名不能包含大写字母,本来想用驼峰命名但是不行呀,那就改成小写试下吧。 vue init webpack vuedemoone,果然可以成功创建 初识VUE记录下遇到的问题 ...

总结前端开发中遇到的问题,分享前端知识 957

WSL2下用QEMU模拟ARM开发板:从编译uboot到调试全流程(附常见错误解决)

本文详细介绍了在WSL2环境下使用QEMU模拟ARM开发板的完整流程,包括uboot编译、内核调试等关键步骤。通过QEMU模拟vexpress-a9开发板,开发者可以高效搭建嵌入式开发环境,解决常见错误并提升开发效率。

solidity8miner的博客 286

095、PCIE物理层测试模式:从信号眼图到误码率实战

本文介绍了PCIe物理层测试模式的调试方法和实战经验。重点解析了环回测试、合规性测试和静默模式的应用场景及配置要点,分享了信号眼图分析、误码率测试和接收端验证的实用技巧。作者结合自身调试经历,强调物理层测试对排查信号完整性问题的重要性,建议在量产前进行基础测试,并提醒注意芯片勘误和测试模式切换等易错点。通过合理使用测试模式,可显著提高PCIe链路调试效率,确保物理层稳定可靠。

z534437748的博客 60

新建vue项目错误提示Sorry, name can no longer contain capital letters.

------>名字中不能有大写也不能用驼峰命名

IU 1万+

ZYNQ BRAM实现PS与PL数据交互

有时CPU需要与PL进行小批量的数据交换,可以通过BRAM模块,也就是Block RAM实现此要求。本章通过Zynq的GP Master接口读写PL端的BRAM,实现与PL的交互。在本实验中加入了自定义的FPGA程序,并利用AXI4总线进行配置,通知其何时读写BRAM。以下为本实验原理图,CPU通过AXI BRAM Controller读取BRAM数据,CPU仅配置自定义的PL BRAM Controller 的寄存器,不通过它读写数据。

baidu_34971492的博客 2276

创建Vue项目时提示错误:Sorry, name can no longer contain capital letters.

百度翻译:抱歉,名称不能再包含大写字母。 Vue创建项目时,项目名称不能使用大写字母。 项目名称改为小写字母,就创建成功了!

Lisa_Xiaotouzi的博客 1267

LDRA Testbed(TBrun)软件单元测试_实例讲解(对多次调用的函数打桩)

在之前的文章《LDRA Testbed(TBrun)软件单元测试_操作指南》中,已经讲解了如何使用TBrun进行软件单元测试的基本操作步骤。本篇文章将结合实例进一步讲解被测函数中包含多次调用其他函数时,如何对其打桩来实现测试目的(详细的操作流程本文不再重述,若有不清楚的,可以结合之前的操作指南一起来看)。本文以一个被测函数作为示例,讲解了如何使用Testbed(TBrun)对涉及到多次调用其他函数的被测函数进行单元测试。本文的示例可能比较简单,但是思路、方法和流程都是通用的,希望对大家有所帮助。

文章主要涉及嵌入式软件开发、测试、项目管理等,欢迎交流,共同进步。 1462

西门子博图v16安装密钥提示报错:CryptAcquireContext MS_DEF_PROV Error of containger opening...如何解决?

🏆本文收录于 《全栈 Bug 调优(实战版)》 专栏。专栏聚焦真实项目中的各类疑难 Bug,从成因剖析 → 排查路径 → 解决方案 → 预防优化全链路拆解,形成一套可复用、可沉淀的实战知识体系。无论你是初入职场的开发者,还是负责复杂项目的资深工程师,都可以在这里构建一套属于自己的「问题诊断与性能调优」方法论,助你稳步进阶、放大技术价值。

**My Coding Family** 3300

Vue Sorry, name can no longer contain capital letters.

Vue 初始化项目时输入命令 vue init webpack frameworkFront。 报错 :Sorry, name can no longer contain capital letters. (对不起,名称不能再包含大写字母。) 报错效果图: 解决办法:初始化的项目名不能包含大写字母。改为小写即可 frameworkfront 解决成功后效果图: ...

LMGD的博客 1689

计算机视觉教程1-1:透视空间与透视变换

在生活中,透视现象很常见,其物理本质是光的直线传播。由于人眼与相机在捕获图像时均存在透视现象,因此计算机几何基于透视空间进行研究。本节介绍透视变换原理

FRIGIDWINTER的博客 3091

接上文,今天项目初期搭建初期的执行过程

本文介绍了在搭建基于Vue3、Vite5、Vant4等技术的移动端开发环境时遇到的问题及解决方案。首先,由于同时使用Gitee和GitHub,需要分别配置SSH密钥。其次,项目要求Node.js版本为20.x以上,因此使用nvm进行版本管理,并安装指定版本。接着,通过npm全局安装pnpm作为包管理工具。最后,进入项目目录安装依赖并运行或打包项目。整个过程涵盖了从环境配置到项目启动的关键步骤,为开发者提供了清晰的指导。

weixin_44366509的博客 190

pytest学习和使用19-pytest断言失败后,怎样保持后续的断言继续执行?(pytest-assume)

【代码】pytest学习和使用19-pytes断言失败后,怎样保持后续的断言继续执行?

虫无涯的博客 1390

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

用VuePress在GitHub Pages上搭建博客

我之前GitHub上的静态博客是用Hexo搭建的,现在在学Vue,就想着Vue有没有对应方面的框架,搜索一番,了解到Vue生态下的VuePress和VitePress,VitePress更轻快,VuePress可配置和灵活性多一些,可自行根据需要选择,我选择功能较多的VuePress。默认生成的静态网站文件在src/.vuepress/dist目录下,将生成的文件上传覆盖到之前代码仓库目录下,访问https://robin-2016.github.io地址就能看到更新后的博客了,就是文章开头链接的博客了。

1225

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

vue项目环境配置

vue

weixin_44970015的博客 349

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决

这绝对是最详细的Vue开发工具vuejs-devtools安装教程,相信你只需要5分钟即可解决所有问题 所需的所有文件,链接:https://pan.baidu.com/s/19GWDS_7GodIdFBUO0eTDAg 提取码:2yvc 一、vue.js插件下载 下载地址:vue.js插件下载; 点击进入Vue官网即可下载,共有两种版本的插件(开发版本:vue.js,生产版本:vue.main.js),建议使用开发版本。开发版本有更多的错误信息提示和调试,文件较大,生产办文件小但是很多提示不全,解决开发

goog_man的博客 6万+

Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令

Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令

ranran0306的博客 9705

vue和vuejs区别_D3vue-VueJS的D3插件

vue和vuejs区别 D3vue (D3vue) D3 integration with Vue.js. 与Vue.js的D3集成。 View demo 查看演示 Download Source 下载源 d3vue is a plugin for VueJS 2 that allows you to take data from your Vue instance and bind ...

cuk5340的博客 3281

VueJS WebPack separating javascript from vue

VueJS 与 Webpack:将 JavaScript 从 Vue 文件中分离

suiusoar 1351

探索Vue.js的无限可能 —— vuejs-challenges

挑战自我,共同成长,Vue.js挑战等你来战!

2401_83063795的博客 2848

vuejs 和 element 搭建的一个后台管理界面

vuejs 和 element 搭建的一个后台管理界面 介绍:   这是一个用vuejs2.0和element搭建的后台管理界面。   相关技术:   vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。   element:基于vuejs2.0的ui组件库。   vue-router:一般单页面应用spa都要用到的前端路由。   vuex...

Danielmumu的博客 1505

推荐:Vue.js 官方文档日语版项目 - vuejs/jp.vuejs.org

推荐:Vue.js 官方文档日语版项目 - vuejs/jp.vuejs.org 在这个飞速发展的前端世界里,拥有清晰、详尽的文档是至关重要的。Vue.js,作为一款轻量级但功能强大的渐进式框架,其官方文档一直是开发者的重要学习资源。现在,对于日语使用者来说,有一个绝佳的机会,那就是参与并使用由社区维护的 vuejs/jp.vuejs.org 项目,它提供了 Vue.js 2.x 版本的日语文档。...

gitblog_00009的博客 1160

提升Vue开发效率的利器:vuejs-devtools

提升Vue开发效率的利器:vuejs-devtools 【下载地址】Vue开发工具vuejs-devtools安装教程及常见问题解决 Vue开发工具vuejs-devtools安装教程及常见问题解决本文详细介绍了如何安装Vue开发工具vuejs-devtools,并提供了常见问题的解决方法 ...

gitblog_06522的博客 747

vuejs插件_VueJS 2的基本翻译插件

vuejs插件 Vue-Polyglot (Vue-Polyglot) basic translation plugin for VueJS 2+. VueJS 2+的基本翻译插件。 View demo 查看演示 Download Source 下载源 安装 (Installation) npm install --save vue-polyglot TLDR (TLDR) can lo...

cuk5340的博客 2152
上一篇: The selection cannot be launched,and there are no recent launches(错误)
下一篇: Nodejs学习之路
NOTEXCEPTION
博客等级 码龄9年 5粉丝 16原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值