`
y806839048
  • 浏览: 1117053 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

源码中vue等新的前端框架都需要编译之后再运行

阅读更多

总括:

 

源码中vue等新的前端框架都需要编译之后再运行

 

1,安装相应的框架编译工具,准别好环境

2,编译

3,运行

 

 

遇到编译工具不存在就安装,安装还是找不到命令就把安装的目录配置环境变量,关掉再开启一个cmd

 

例如:https://blog.csdn.net/huifeidehupo/article/details/101541924

vue目录加入path环境变量之后关掉cmd重开一个即可

 

 

 

 

install 是编译

npm install --registry=https://registry.npm.taobao.org   //编译参数不行就不用

 

npm run dev 运行

运行起来之后就会按照前端的设置自动提示你访问地址

 

例如:

https://baijiahao.baidu.com/s?id=1621989444415819861&wfr=spider&for=pc

 

修改完代码之后重启即可,不行就编译重启

 

 

 

示例:

vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。它是轻量级的,它有很多独立的功能或库,我们会根据我们的项目来选用vue的一些功能。它提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

一、安装vue

1、安装node.js,安装完node.js之后,npm也会自动安装

查询是否安装成功的命令:

node -v

npm -v

2、全局安装脚手架工具vue-cli,命令如下:

npm install --global vue-cli

3、vue项目初始化命令如下,若没有安装webpack,则先安装webpack

npm install -g webpack

vue init webpack myVue

注:安装过程 中有个选项(Use ESLint to line your code ?选择 No )

初始化完成后的vue项目目录如下:

4、进入到myVue目录下,使用npm install 安装package.json包中的依赖

命令如下:

cd myVue

npm install

5、运行项目:

npm run dev

在浏览器上输入:localhost:8080,将会出现下面的vue初始页面:

6、结束项目运行:

ctrl+v,选择Y即可停止项目的运行

二、vue项目目录说明

 

build:项目构建(webpack)相关代码

config:配置目录,包括端口号等

node_modules:npm加载的项目依赖块

src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

assets: 放置一些图片,如logo等

components:该目录里存放的我们的开发文件组件,主要的开发文件都存放在这里了

App.vue:项目入口文件

main.js:项目的核心文件

router:路由配置目录

static:放置一些静态资源文件

test:初始测试目录,可删除

.xxxx文件:这些是一些配置文件,包括语法配置,git配置等

index.html:首页入口文件

package.json:项目配置文件

README.md:项目的说明文档,markdown 格式

三、vue项目启动流程

1、在执行npm run dev的时候,会去在当前文件夹下的项目中找package.json文件,启动开发服务器,默认端口是8080;

 

2、找到src的main.js文件,在该文件中new Vue的实例,要加载的模板内容App;

3、App是src目录下的App.vue结尾的文件;

4、在App.vue所对应的模板当中,有一个router-view在src目录下有一个router文件夹,该文件夹有个index.js文件,该文件是配置路由词典,指定了路由地址是空,加载HelloWorld组件

 

注:vue运行是基于node环境的,构建vue框架之前,需要确保node环境安装成功

四、Vue的组件的使用

1、在components文件夹下创建.vue结尾的文件

例如在:src/components/public/目录下新建header.vue文件

header.vue文件内容如下:

2、在路由配置文件src/router/index.js中引入组件并配置组件路由

2.1、引入组件

import Header from '@/components/public/header'

2.2、配置组件路由

{

path: '/header',

name: 'header',

component: Header

}

3、运行项目:npm run dev

4、在浏览器中输入:localhost:8080/header ,显示如下页面:

附:vue生命周期示意图

 
分享到:
评论

相关推荐

    前端vue源码(附有详细代码)

    比如下面提到一些重点需要查看的文件package.json,可以从这个文件看到整个项目的入口文件、开发/测试/发布编译的各种命令,也可以了解到项目的依赖库、工具以及框架等等。 webpack/gulp/rollup配置文件,从这个文件...

    未编译前端VUE源码.rar

    标题 "未编译前端VUE源码.rar" 暗示了这是一个包含Vue.js项目未经编译的源代码压缩包。Vue.js是一个流行的JavaScript框架,用于构建用户界面。让我们深入探讨一下这个压缩包中可能包含的文件及其在Vue项目中的作用。...

    大屏可视化搭建系统源码(vue)

    1. **组件化开发**:Vue.js的核心设计理念是组件化,系统源码中的各个大屏元素,如图表、地图等,都可以封装为独立的组件,实现复用和灵活组合。这极大地提高了代码的可维护性和开发效率。 2. **数据绑定**:Vue.js...

    最新热门、好看前端vue模板大全

    Vue.js 是一款非常流行的前端JavaScript框架,用于构建用户界面,尤其在现代Web开发中占据了重要地位。"最新热门、好看前端vue模板大全"这个标题暗示了我们即将探讨的是与Vue.js相关的高质量模板集合,这些模板可以...

    基于vue的购物网站项目javascript源码

    本项目是基于vue框架写的javascript源码。适合初中级别的js开发者学习和参考使用。 以下是项目简单介绍 本项目根据coderwhy老师学习并独立完成,用于个人学习, 项目的基本功能已完全实现,商品数据需要从远程服务器...

    vue微商城项目源码-vue-shop(适用于Node.js 10.x).zip

    你可以使用Express.js或Koa.js等Node.js框架创建后端服务,并通过HTTP请求与Vue前端进行通信。 - 数据库集成:考虑到电商应用,可能需要连接MySQL、MongoDB等数据库来存储商品信息、用户数据等。 5. 部署: - ...

    vue-devTool编译和安装教程附源代码和编译后的安装包

    Vue.js 是一个流行的前端JavaScript框架,用于构建用户界面。Vue DevTools 是一款强大的浏览器扩展,它为Vue应用程序提供了丰富的开发工具,包括组件树查看、实时数据观察、性能分析等功能。在Chrome、Firefox等...

    VUE-shop商城源码

    Vue-shop商城源码是一个基于Vue.js前端框架构建的电子商务平台项目。Vue.js是现代JavaScript库,用于构建用户界面,尤其适合单页应用(SPA)。Vue.js以其轻量级、易于学习和强大的功能著称,使得它在前端开发领域...

    vue源码解析.zip

    Vue.js 是一款非常流行的前端JavaScript框架,由尤雨溪开发并维护。它的设计目标是使构建用户界面变得简单、易用且可复用。Vue.js 的源码解析可以帮助开发者深入理解其工作原理,提高开发效率,并能更好地进行性能...

    前端vue2源码梳理文档

    Vue2 中修改数组,需要使用 Vue.set 或者 this.$set 添加响应式属性,而 Vue3 可以直接修改数组中的某一项。 九、Vue 的生命周期 Vue 的生命周期包括初始化、.mounted、updated 和 destroyed 等几个阶段。在初始化...

    vue2.0源码学习资源

    Vue.js 是一款流行的前端JavaScript框架,它以组件化开发、轻量级和高效的特性深受开发者喜爱。Vue 2.0的源码学习是一项深入理解其工作原理的重要任务,这对于提升开发技能和优化应用性能有着不可忽视的价值。在这个...

    Vue.js 3.0企业级管理后台源码(前端)

    Vue.js 3.0 是一个重要的前端框架更新,它带来了许多性能优化和新特性,使得构建企业级管理后台更加高效和便捷。这个源码包包含了构建一个基于Vue 3.0的企业级管理后台所需的全部前端资源。让我们逐一解析每个文件的...

    基于vue开发的免费小说阅读app源码.zip

    Vue.js作为现代前端框架,负责处理这部分工作,构建用户友好的界面。 4. **javascript**:JavaScript是Web开发的标准语言,Vue.js是基于JavaScript的库,用于实现动态交互和业务逻辑。 5. **ecmascript**:...

    vue仿门户网站代码(纯前端)

    Vue.js 是一款非常流行的前端JavaScript框架,由尤雨溪开发,以其轻量级、高性能和易上手的特点受到广大开发者喜爱。"vue仿门户网站代码(纯前端)"项目是基于Vue.js实现的一个模拟门户网站的前端代码,旨在为学生...

    vue3源码 vue-next源码

    Vue3的源码,也就是`vue-next`,是一个开放源代码项目,允许开发者深入理解其内部工作原理,从而更好地利用这一强大的前端框架。在Vue3中,最显著的变化包括组合式API、基于Proxy的数据响应机制以及平台无关的虚拟...

    前端框架及项目面试-聚焦Vue3、React、Webpack

    本课程"前端框架及项目面试-聚焦Vue3、React、Webpack"是针对这一领域的深入探讨,旨在帮助开发者和求职者掌握最新、最热门的技术,特别是Vue3、React和Webpack这三大核心工具。 Vue3是Vue.js框架的最新版本,它的...

    基于 vue + element-ui 的后台管理系统源码.zip

    Vue.js 是一款轻量级的前端JavaScript框架,它以其易用性、灵活性和高效性而备受开发者喜爱。Element-UI 是一套为 Vue.js 设计的组件库,它提供了丰富的界面组件,如表格、按钮、通知、对话框等,极大地简化了开发...

    vue3源码解析 vue3源码解析 vue3源码解析 vue3源码解析

    Vue3 是一款流行的前端框架,其源码解析对于开发者深入理解框架的工作原理至关重要。本文将主要探讨Vue3的几个核心知识点:虚拟DOM(Virtual DOM)、diff算法、mustache模板引擎、数据响应式原理以及指令和生命周期...

    考务系统前端源码vue

    【考务系统前端源码Vue】是一个基于Vue.js框架构建的前端应用,专门用于管理和组织考试活动。Vue.js是目前非常流行的轻量级JavaScript库,以其组件化、易学易用和高性能的特点深受开发者喜爱。这个项目的核心在于...

    从给定的 URL 加载. Vue 文件,并将其直接编译到 Browser.zip 中的组件

    在现代Web开发中,Vue.js 是一款非常流行的前端框架,它简化了构建用户界面的复杂性。本话题涉及的核心知识点是将Vue组件从远程URL加载并直接在浏览器中进行编译,这通常涉及到以下几个关键步骤和技术: 1. **Vue...

Global site tag (gtag.js) - Google Analytics