vue2-006——使用脚手架搭建vue2项目+项目结构分析

news2024/12/23 5:21:17

一、创建项目:vue create 项目名

D:\EnyiWang\Documents\myStudy\vue>vue create vue_test


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v5.0.8
✨  Creating project in D:\EnyiWang\Documents\myStudy\vue\vue_test.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 866 packages in 3m
npm notice
npm notice New major version of npm available! 8.19.3 -> 10.2.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.4
npm notice Run npm install -g npm@10.2.4 to update!
npm notice
🚀  Invoking generators...
📦  Installing additional dependencies...


added 94 packages in 2m
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue_test.
👉  Get started with the following commands:

 $ cd vue_test
 $ npm run serve

二、运行项目:cd 项目名 、 npm run serve

D:\EnyiWang\Documents\myStudy\vue>cd vue_test

D:\EnyiWang\Documents\myStudy\vue\vue_test>npm run serve

> vue_test@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 7183ms                                                                                                                                               22:00:04


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.22.88:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

在这里插入图片描述

三、vue2项目结构分析

3.1、项目整体结构分析

在这里插入图片描述

3.2、public文件夹结构分析

在这里插入图片描述

3.3、src文件夹结构分析

在这里插入图片描述

3.4、main.js分析

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1252238.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

批量按顺序1、2、3...重命名所有文件夹里的文件

最新: 最快方法:先用这个教程http://文件重命名1,2......nhttps://jingyan.baidu.com/article/495ba841281b7079b20ede2c.html再用这个教程去空格:利用批处理去掉文件名中的空格-百度经验 (baidu.com) 以下为原回答 注意文件名有空格会失败…

张弛声音变现课,惊悚电影配音篇

在提供惊悚片的声音配音服务时,配音员旨在制造一种让观众的心率加快、情绪紧张的气氛。惊悚片侧重于心理层面的紧张和预期的恐怖,声音在塑造这种心理效应中起到了至关重要的作用。演员需通过对声音的精细雕琢和调整来强化电影的悬念和紧迫感。以下是为惊…

SIM卡结构及上电流程详解

SIM卡结构及上电流程详解 1. sim卡概述1.1 什么是SIM卡1.2 Sim卡的作用 2. Sim卡的主要功能2.1存储数据2.2 PIN码保护2.3 用户身份鉴权2.4 Sim卡中的保密算法及密钥2.5 SIM卡的类型2.6 Sim卡物理接口2.7 SIM卡内部结构2.8 SIM卡文件结构2.9 常用的文件操作2.9.1 常用的有如下操…

Java基础(第九期):Java中的集合 ArrayList 集合的增删改查 Java实现学生信息管理系统

⚠️Java基础专栏 文章目录 ⚠ Java基础最后一期(第九期)到此结束 Java中的集合一、什么是集合二、ArrayList2.1 ArrayList介绍2.2ArrayList使用2.3 ArrayList添加add()方法add(index,E element&#xff0…

《微信小程序开发从入门到实战》学习二十九

3.4 开发参与投票页面 3.4.4 使用label组件扩大单击区域 radio组件的单击区域很小,只有文字左侧的圆圈可以点击,实际使用者一般会期望点击文字也可以选中选项,用label组件包含radio组件,就可以实现点击文字也可以选项。 label组…

基于WSL2+Docker+VScode搭建机器学习(深度学习)开发环境

基于WSL2DockerVScode搭建机器学习(深度学习)开发环境 内容概述:由于最近配发了新的工作电脑但不想装双系统,因此通过本博文来记录基于Windows子系统WSLDocker搭建机器学习与深度学习开发环境的流程步骤,同时记录该过程中所遇到的相关问题及解…

上新!2023年汉字小达人市级比赛在线模拟题增加2个刷题试卷

各位小学三年级到五年级的上海学霸孩子们,刚刚结束了上海小学生古诗文大会的复赛,就紧锣密鼓地全身心投入到上海小学生汉字小达人的市级比赛的备赛中了。 为了助各位孩子一臂之力,我把在线模拟题进行了更新,新增了两个可以刷题的试…

安卓用SQLite数据库存储数据

什么是SQLite? SQLite是安卓中的轻量级内置数据库,不需要设置用户名和密码就可以使用。资源占用较少,运算速度也比较快。 SQLite支持:null(空)、integer(整形)、real(小…

深度学习第二天:RNN循环神经网络

☁️主页 Nowl 🔥专栏《机器学习实战》 《机器学习》 📑君子坐而论道,少年起而行之 文章目录 介绍 记忆功能对比展现 任务描述 导入库 处理数据 前馈神经网络 循环神经网络 编译与训练模型 模型预测 可能的问题 梯度消失 梯…

开源称重系统-有源代码

最近发现网上有个不错的开源称重软件,界面做的非常漂亮,收藏一下;还有硬件对接:耀华A9仪表、海康威视监控,IC卡读卡器,控制器对接都有,是个不错的软件,非常感谢作者分享;…

Day45:300.最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

文章目录 300.最长递增子序列思路代码实现 674. 最长连续递增序列思路代码实现 718. 最长重复子数组思路代码实现 300.最长递增子序列 题目链接 思路 单个字符都是一个长为1的子序列,直接初始化dp为1。先固定一个元素位置i,判断0-i范围内到i的最长子序…

十六、互斥量

互斥量的目的就是为了实现互斥访问。 1、概述 (1)举例说明: 怎么独享厕所?自己开门上锁,完事了自己开锁。 你当然可以进去后,让别人帮你把门:但是,命运就掌握在别人手上了。 …

分享一篇很久以前的文档-VMware Vsphere菜鸟篇

PS:由于内容是很久以前做的记录,在整理过程中发现了一些问题,简单修改后分享给大家。首先ESXI节点和win7均运行在VMware Workstation上面,属于是最底层,而新创建的CentOS则是嵌套后创建的操作系统,这点希望…

得物面试:MySQL为何需要4M来双写?为什么redo不双写?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中,最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、shein 希音、百度、网易的面试资格,遇到很多很重要的面试题: MySQL为何需要4M来双写?为什么redo不双写&…

count=0语句的位置

简洁一点的代码: 像count0这种语句要注意放好位置,尤其是在循环里。

2017年3月24日 Go生态洞察:HTTP/2服务器推送技术深度解析

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

操作无法完成错误0x0000709的解决办法,解决0x0000709错误

操作无法完成错误0x0000709是一种常见的Windows错误。这篇文章将带大家了解错误的原因,并提供一些解决该问题的方法,希望能够帮助大家解决0x0000709错误问题。 操作系统错误是我们在使用电脑时经常遇到的问题之一。其中之一就是操作无法完成错误0x000070…

ethernet II 的故事

以太帧有很多种类型。不同类型的帧具有不同的格式和MTU值。但在同种物理媒体上都可同时存在。 以太网第二版或者称之为Ethernet II 帧,DIX帧,是最常见的帧类型。并通常直接被IP协议使用。 格式 当数据帧到达网卡时,网卡要先去掉前导码&#…

安卓系统修图软件(一)

平时我们会不时在朋友圈发自己的自拍照,或者是风景图等,许多小伙伴们此时会对照片进行一定的修理,比如添加滤镜等操作。在电脑上用ps修图比较繁琐,日常中大可不必用这把宰牛刀;而手机自带的编辑器,或者是QQ…

位图及有关海量数据处理

bitset 1.给40亿个不重复的无符号整数,没排过序,给一个无符号整数,如何快速判断一个数是否在这40亿个中 ①.如果用排序加二分查找,40亿个数需要16g内存,内存开不出这么大连续空间 ②.每个值映射一个比特位,…