VS Code开启第一个VUE前端项目（2）

最新推荐文章于 2025-06-05 17:23:13 发布
原创 最新推荐文章于 2025-06-05 17:23:13 发布 · 672 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js #main.js #app.vue #index.html

本文介绍了作者在实习期间初次接触Vue项目的过程，详细解析了Vue项目的执行顺序，从index.html开始，经过main.js找到app.vue，再到路由配置。通过分析代码，解释了Vue实例的创建、组件注册以及路由渲染的工作原理。

       实习的期间真苦逼啊，才学两天就要开始写了，完全跟不上节奏。尤其是已经开始一段时间的项目，半路进来实习，完全看不懂他们的代码，有点赶鸭子上架的感觉。

       没办法，有压力才有动力，压住内心的躁动，开始今天的熟悉认知代码环节。

      下面是整个VUE项目的执行顺序，显示index.html，然后去找入口main.js，main.js需要找到app.vue，去路由Router下面的index.js找注册的路由信息，路由信息在components文件下面，如一开始的Helloworld.vue。

      

在代码中具体是怎么个流程呢？

先来看一个index.html，代码如下

而效果图为

最低0.47元/天 解锁文章
Vue前端框架：Vue前端项目文件目录
Cachel Wood的博客
11-02 872
是项目的核心配置文件，记录了项目的基本信息（如项目名称、版本、描述、作者等）、所依赖的包以及一些脚本命令等内容。这是存放项目主要源代码的地方，几乎所有与项目业务逻辑、页面组件、样式等相关的代码都会在这里编写和组织。该文件夹是打包后生成的目录，用于部署到服务器。其中包含了经过项目构建和压缩的代码文件。本身不是一个文件夹，但它所在的文件夹（一般就是项目根目录）也具有重要意义。该文件夹是用于存放公共资源的文件夹。安装的项目依赖包，包括了项目运行和构建所需的各种模块。
VS Code开启第一个VUE前端项目（6）
Batman_Encoding的博客
04-24 426
根据项目写vue模块前，需要根据具体页面，编写具体标签，并且加上数据逻辑与事件，下面整理了几个常见的重要知识点，比如this指向问题，函数调用问题，数据共享问题等。 今天主要介绍一下this指向问题： 可以在函数内部，通过this.param的方式获取到data(){}里面定义的属性，其中，这里的this指的是当前VUE对象，也叫做VueComonent，如下面的截图： 可以看到data...
Vs code搭建vue项目
重生之我不会写代码
06-21 2477
一、安装配置nodejs nodejs配置：nodejs安装教程 二、安装配置vscode 去网上下载vscode进行安装 三、安装vuecli 命令窗口或者vscode终端输入命令： npm i -g @vue/cli 或者 cnpm i -g @vue/cli 注意： 如果出现这个，根据给出的路径，把那个文件（vue.ps1）删除就行 四、创建项目 1）创建 1、先创建存放项目的文件夹，我创建的是VscodeProject 2、从这里打开创建的文件夹，或者在终端cd进去 3、创建项目命令：v
VS Code开启第一个VUE前端项目（1）
Batman_Encoding的博客
04-09 3848
最头疼的还是环境的安装配置等操作，也是为了以后忘记，记录自己的前端学习过程。 首先VUE是前端的框架，全称为vue.js，一般需要同node.js一起使用。 一. 下载node.js 一路next就结束了，然后windows+R，输入cmd，打开后台 输入node -v查看是否安装成功 有版本就说明成功了，其中npm也会安装，同样输入npm -v，可以查看安装结果 np...
vscode搭建vue环境
fortune_mz的博客
04-03 2万+
1.在nodejs安装目录下新建node_cache（nodejs缓存）、node_global（全局包存放）两个文件夹，如下图所示。根据个人电脑型号显示进行下载，安装时注意指定安装路径，然后一直选择next即可。可关闭vscode，选择以管理员身份再次打开，或者检查环境变量是否配置正确。，用于统一JavaScript代码风格的工具。运行vue文件时报错。
vue中在终端使用（npm run serve）命令运行main.js报错，怎么解决？
weixin_65270579的博客
03-29 1440
vue中在终端使用（npm run serve）命令运行main.js报错，怎么解决？
VS Code开启第一个VUE前端项目（3）
Batman_Encoding的博客
04-11 622
对于初学者来说，代码首先需要看的懂，而刚刚赶上架的我，前端知识几乎为0，接下来对VUE项目内部生成的文件中，出现的语法进行介绍，也是记录自己学习的过程。 一，import import Vue from 'vue' import from 这个是ES6里面的特性，完整的写法如下，主要是加载Vue类 import Vue from "../node_modules/vue/d...
我的第一个前端项目，vue项目从零开始创建和运行
麦小洛
01-06 4890
​入门前端，从基础做起，从零开始新建项目。VUE脚手架项目是一个“单页面”应用，即整个项目中只有1个网页！
0到1搭建前端Vue2项目
最新发布
菜鸟的博客
06-05 3373
1.1 打开 cmd 命令提示符进入到存放项目的目录，在命令提示符上使用 “ vue create 项目名” 命令创建项目。1.2 之后可以选择 vue 版本，虽然现在 vue2 已经停更，但是还是值得学习的。1.3 等待初始化 vue 脚手架后，会出现蓝色的两条命令，依次执行它们即可启动 vue。vue脚手架启动成功后会出现蓝色的两个网址，无论是哪个网址都可以打开页面。1.4 浏览器输入网址后界面如下。
开发和调试 VS Code 源码
woyebuzhidao321的博客
02-24 3188
vscode的依赖安装还是挺费劲的，反反复复安装了半天才成功，公司wifi,手机热点、科学上网工具各种切换。 依赖环境参照文档：https://github.com/microsoft/vscode/wiki/How-to-Contribute?_blank 安装依赖：yarn 自动编译：yarn watch 启动窗口：./scripts/code.sh Main 和 Renderer 倘若你之前没有 Electron 的开发经验，这个段落不容错过。 如果你可以建一个网站，你就可以建一个桌面应用程序。 E
vue项目文件中的 main.js
北芒的博客
03-31 1万+
1. 干什么的？ 是初始化vue实例并使用需要的插件 并且将你的内容渲染到主页面上 2. 初始内容介绍 import Vue from 'vue' // 引入VUE核心库 import App from './App.vue' // 引入一个当前目录下的名字为App.vue的组件 Vue.config.productionTip = false; // 是否要在生产环境当中给...
搭建vscode+vue环境
热门推荐
mao834099514的博客
01-23 16万+
一、安装vue.js1.简介Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现
vscode下面开发vue.js项目
林老师带你学编程
01-26 2万+
vscode下面开发vue.js项目 想学习分布式、微服务、JVM、多线程、架构、java、python的童鞋，千万不要扫码，否则后果自负~ 1.首先用官方vue-cli脚手架创建一个vue的集成环境（不会的请阅读上一章节），目录如下： 目录结构介绍请阅读博客：https://www.jianshu.com/p/2769efeaa10a 2.然后在src下面的components目...
用vscode实现vue.js项目的一个完整过程
weikwer
07-30 11万+
1,新建项目 打开Visual studio code 打开一个你想要创建项目的文件夹 打开集成终端：查看 –> 集成终端 或者直接按 ctrl+` 如果没有安装vue-cli，在终端输入： npm install -g vue-cli 全局安装vue-cli 然后新建项目 vue init webpack projectName project...
【转载】Vs2019开发Vue前端项目
STATICHIT静砸的博客
10-24 3916
npm：相当于.net项目中的引用，可以在这里添加第三方开发包，例如前端架构vant、elementui等。dist：项目生成成功后会在这个文件夹中生成各种打包好的文件和目录，用于以后部署到托管服务中。public：开放的静态资源目录，不会被编译到项目中，部署后会查看到public目录中的内容，程序中可以通过根目录直接引用。经常变化的资源可以放到这里，比如经常修改的图片或者css都可以放到这里。
vs code 简易使用教程（前端）
supming1的专栏
10-01 3万+
一、常用设置： 1、设置tab为2空格 用户首选项 =》 设置 => 直接搜索editor.tabSize 设置为2 2、设置换行采用\n形式 用户首选项 =》 设置=> 直接搜索files:eol进行设置为\n。 如果映是\r\n了，可以通过下图的方式进行转换 二、vs code 常用插件 安装方法：点击vscode左侧扩展，搜索插件，点击安装 Path In...
VUE——IDEA 启动前端工程VS文件启动前端工程
chenjianghhua的博客
12-30 6253
启动已有的vue前端项目
VSCode打开已有vuejs项目
Yoryky的专栏
10-19 5万+
今天公司培训使用VSCode来编写vuejs项目，拿了一个范例来展示，讲的比较快，没怎么听清楚。于是下来自己动手配置一下。下载安装并配置VSCode随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。1、vetur插件的安装该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选
VS Code之Vue开发常用插件
敲键盘的猫
05-28 6万+
Auto Close Tag 自动补全html标签 Auto Rename Tag 同步更改html尾标签 ESLint ESlint语法提示 settings.json 文件 "eslint.nodePath": "E:/WebStorm", // 应用路径 "eslint.validate": [ "javascript", "javascriptreact", "vu
VS Code初探：快速上手Vue项目搭建
这个过程只是搭建Vue项目的第一步，后续还有许多其他概念和技术等待探索，如组件化开发、路由管理、状态管理（Vuex）、单元测试等。随着对VS Code和Vue.js的进一步熟悉，您可以更高效地开发、调试和迭代您的项目。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值