VUE项目目录与运行流程（VScode）

已于 2024-02-15 11:43:48 修改
阅读量760 收藏 10
点赞数 13
文章标签： vue.js 前端 javascript vscode html less
于 2024-01-22 17:37:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64498202/article/details/135743082
版权
本文介绍了Vue项目的目录结构，重点解析了App.vue作为根组件的角色和组件化的概念。详细讲解了如何在VScode中设置Vue标签补全，并分别阐述了局部注册和全局注册普通组件的方法及效果展示。
摘要由CSDN通过智能技术生成

各目录对应名称含义

  1. main.js（导入App.vue，基于App.vue创建结构渲染index.html） 
    //核心作用：导入App.vue，基于App.vue创建结构渲染index.html

//1.导入Vue核心包
import Vue from 'vue'

//2.导入App.vue根组件
import App from './App.vue'

//提示：当前处于什么环境（生产环境/开发环境）
Vue.config.productionTip = false

//3.Vue实例化，提供render方法->基于App.vue创建结构渲染index.html
new Vue({
  render: h => h(App),
}).$mount('#app')
  2. App.vue（App根组件：呈现出App里面的内容）

index.html(各个页面文件)

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name=
最低0.47元/天 解锁文章
Crystal_qwq
关注
新手安装VSCode+Vue项目运行手册（适合新手）
12-16
【Vue项目运行手册：新手与VSCode安装指南】 在当今的前端开发领域，Vue.js已经成为了备受青睐的JavaScript框架之一，而Visual Studio Code (VSCode)作为一款强大的源代码编辑器，更是许多开发者的选择。本手册旨在...
Vue前端项目运行
qq_51066068的博客
08-02 3949
​环境：vscode、node.js、cnpm/yarn npm安装起来太慢了、建议使用 cnpm或yarn 1.从码云上下载前台项目，使用vscode打开 2.安装依赖（请提前自行安装 cnmp 或 yarn） ​
vue项目结构文件介绍及项目运行流程
daishu_shu的博客
06-23 4627
用vue和ue-cli搭建的前端项目是很多企业项目的选择，所以了解项目的结构和项目如何运行是非常有必要的，会给我们平时的工作带来很大的帮助。 2.App.vue App. vue是我们的根组件(使用标签渲染整个工程的.vue组件) ，所有页面都是在App. vue下进行切换的。其实你也可以理解为所有的路由也是App. vue的子组件。所以我们 vue项目运行的流程顺序......
vscode 生成项目目录结构 directory-tree 实用教程
最新发布
朝阳39的博客
06-28 1140
有中文介绍，极其友好！
02-启动 Vue 项目
奔三的Uncle
06-08 4474
打开vscode编辑器，点击 1.文件 ——>打开文件夹，2.选中要打开的文件，3.选择文件夹。系统默认一般为项目分配80端口，如若要修改默认端口，可在vue.config.js文件里修改。点击 serve 右侧的三角符号，即启动项目。打开后可以看到该文件的子目录，在左下角可以看到有 npm脚本。在本地浏览器输入：localhost:8080 即可访问启动成功的项目。项目的启动也有两种方式，一种是通过图形界面启动，另一种是通过命令行启动。在弹出的命令行界面输入：npm run serve ,启动项目。
VS code运行vue项目
各类程序设计成品、文档、学习资料
10-25 2万+
请注意，以上步骤假设您的Vue项目已经配置好了相应的构建脚本（如package.json中的"scripts"字段）。命令时出现"无法将'npm'项识别为cmdlet、函数、脚本文件或可运行程序的名称"的错误消息，这可能是因为您的计算机上没有正确安装Node.js和npm，或者系统环境变量配置不正确。2.在VS Code的侧边栏中，选择您的Vue项目文件夹，或者使用菜单中的“文件”->“打开文件夹”选项来打开项目文件夹。3.打开终端（菜单中的“视图”->“终端”），确保终端位于您的Vue项目文件夹下。
运行vue文件的vscode配置【初次配置】
qq_57676486的博客
07-03 203
4.安装echarts：npm install echarts@4.9.0 --legacy-peer-deps。注意：目前安装完成后不需要配置环境了，直接win+r输入node -v。OK了完成上述三步可以打开vscode终端输入。出现版本号就是安装完成了。可以了可以了，能运行了。
VSCode搭建Vue Element Admin的项目环境
04-11
### VSCode搭建Vue Element Admin的项目环境 #### 版本说明 - **Node**: v18.20.2 - **NPM**: 10.5.0 - **Git**: 2.19.1 - **Vue Element Admin**: [官网链接]...
vue cli3.0 引入eslint 结合vscode使用
10-16
本文主要介绍如何在使用Vue CLI 3.0创建的Vue项目中引入ESLint代码检测工具，并结合Visual Studio Code（VSCode）编辑器来实现代码的实时检测与自动修复。 ### 知识点一：ESLint简介 ESLint是一款插件化的...
用webstorm和vscode断点调试vue
12-04
为了提高开发效率和代码质量，开发者需要掌握如何在WebStorm和VSCode中进行断点调试Vue项目。本文将详细阐述这两种主流IDE的Vue断点调试技术。 首先，我们来了解什么是断点调试。断点调试是一种强大的开发工具，它...
用vscode开发vue应用的方法步骤
10-17
为了保持代码风格的一致性，你需要安装Vetur插件，它是VSCode开发Vue项目的重要辅助工具。在VSCode内搜索并安装Vetur。 尝试自动格式化代码，你可能会发现当前无法进行。这时，需要在项目中添加Prettier，它是用于...
vue路径详解
千里之行，始于足下！
08-13 3064
1、路径（./）：表示相对路径，如./component/header.vue ,表示的是在当前目录同级的目录component文件夹下的header.vue文件。 2、路径（/）: 表示绝对路径 3、路径（@/）:表示相对路径，在webpack.config.js文件中： resolve：{ alias:{ 'vue':'vue/dist/vue.esm.js', '@'...
使用vscode运行Vue项目
热门推荐
someday____的博客
08-31 2万+
检查安装情况：打开cmd，依次输入node -v 和 npm -v，查看到版本号，则安装成功。代表开始运行项目，这条命令会自动在浏览器上运行项目，运行结果如下图所示，代表配置成功了。点击(ctrl+点击)网址http://localhost:80/，可得运行结果。使用vscode运行别人工程里的vue项目。用vscode打开vue项目。呼出控制台，在控制台点击。...
如何用vscode运行vue项目（vscode配置）
m0_46698214的博客
06-30 6470
该博客之前建议查看上两篇博客关于vscode安装与vue环境配置 1、vscode安装 2、vue环境配置 vue插件的安装 vetur安装 该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行。 eslint安装 eslint智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误。至于安装，同样打开插件扩展窗口输入eslint点击安装插件 Auto Close Tag安装 Auto Close Tag 自动闭合HTML/XML标签 Auto Rename Tag
前端--基础 目录文件夹和根目录 VScode打开目录文件夹
三毛与海子的博客
12-31 3201
目录文件夹 根目录 详解； VScode 打开目录文件夹两种方式
视频理解编辑生成
dmcAvenger的博客
08-27 640
视频理解、编辑、生成视频理解第一步：概念功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 视频理解 视频理解paper调研 第一步：概念 https://zhuanlan.zhihu.com/p/91986833 问题多数工作聚焦
vsCode首次加载Vue项目
qq_22325259的博客
08-11 3035
第一步环境搭建 1、去微软官网下载vsCode并安装 vsCode官方下载地址：https://code.visualstudio.com/Download/ 2、安装nodejs，可自行去官网下载安装，推荐下载LTS稳定版 nodejs下载地址：https://nodejs.org/zh-cn/ 3、vsCode安装完成后，安装几个常用的扩展插件： <1> Chinese (Simplified) Language Pack for Visual Studio Code中文语言..
用vscode实现vue.js项目的一个完整过程
GoodIdea
09-18 4925
1,新建项目  打开Visual studio code  打开一个你想要创建项目的文件夹  打开集成终端：查看 –&gt; 集成终端 或者直接按 ctrl+` 如果没有安装vue-cli，在终端输入： npm install -g vue-cli  全局安装vue-cli 然后新建项目 vue init webpack projectName 1 projectName换为你想要的名...
基于vscode实现vue3项目创建启动+安装配置路由vue-router实现单页面组件切换
weixin_40996100的博客
04-08 6223
基于vscode实现vue3项目创建启动并安装配置路由vue-router实现单页面组件切换
创建一个vue项目的流程
09-03
要在VSCode中创建一个Vue项目，可以按照以下步骤进行操作： 1. 首先，确保你的电脑上已经安装了Node.js。你可以在终端中输入`node -v`来检查是否已经安装。 2. 打开VSCode，并在侧边栏中点击左上角的“扩展”按钮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值