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生命周期示意图
相关推荐
比如下面提到一些重点需要查看的文件package.json,可以从这个文件看到整个项目的入口文件、开发/测试/发布编译的各种命令,也可以了解到项目的依赖库、工具以及框架等等。 webpack/gulp/rollup配置文件,从这个文件...
本项目是基于vue框架写的javascript源码。适合初中级别的js开发者学习和参考使用。 以下是项目简单介绍 本项目根据coderwhy老师学习并独立完成,用于个人学习, 项目的基本功能已完全实现,商品数据需要从远程服务器...
将Vue核心模块一一拆解,手写底层源码,带你手一个自己的Vue框架!本套教程带你手写响应式数据系统底层、手写模板编译系统底层、手写虚拟DOM和diff算法底层……内容循序渐进,深入浅出,讲解图文并茂,鞭辟入里,用...
乡政府管理系统是一个基于SpringBoot后端框架和Vue前端框架的全面解决方案。该系统旨在为乡政府提供高效、便捷的管理工具,以优化日常行政操作和服务流程。以下是对这套系统及其源码包内容的详细介绍: 系统概览: ...
这是一个基于SSM(Spring、SpringMVC、MyBatis)框架和Vue前端技术的家居商城系统的源码资源包。该资源包包含了完整的项目源码,部署说明,演示视频以及源码介绍,非常适合用于学习和参考。 这个项目是一个典型的...
部署说明部分详细介绍了如何将项目部署到服务器上,包括环境配置、数据库安装、项目编译和运行等步骤。同时,还提供了一些常见问题的解决方案,方便用户快速解决部署过程中遇到的问题。 演示视频展示了项目的实际...
该项目采用了SSM(Spring、SpringMVC、MyBatis)框架和Vue前端技术进行开发,实现了一个功能完善的员工信息管理系统。项目资源包中包含了源代码、部署说明、演示视频以及源码介绍,方便用户快速了解和使用该系统。 ...
部署说明包括了环境配置、数据库配置、项目编译和运行等方面的步骤。 演示视频:为了更好地展示系统的使用方法和功能,项目还提供了一个演示视频。视频中详细介绍了系统的各个功能模块,以及如何进行实验室预约、...
- 前端:基于Vue3和Vite构建的现代化前端框架,使得界面响应迅速,交互体验流畅。 - 后端:采用Python编写的Flask应用,为平台提供稳定可靠的服务。 - 文件类型:包含了各类静态资源文件,如CSS(190个)、JSON(163...
首先,这个平台是基于SpringBoot后端框架和Vue前端框架开发的。SpringBoot是一个用于简化新Spring应用的初始搭建以及开发过程的框架,它内置了大量常用的库和插件,使得开发者可以更加专注于业务逻辑的开发。而Vue则...
系统简介 该系统基于springboot2,vue2.X等技术实现了校园招聘系统,为求职者与招聘人员提供了便捷的在线招聘信息... 编译前端代码vue:编译(cnpm install),试运行(npm serve) 导入后端代码springboot 启动springboot
前端是vue编译后,没有纯源码,后端是larvael5框架,有产品数据随机波动+新注册用户下赢比例+用户单控功能 程序全部都是完整的,没有二开要求的话可以直接运营,语言有中英文 启动: php artisan workman start ...
源码:本项目的源代码包括前端Vue.js应用、后端SSM框架以及数据库设计。通过解压提供的zip文件,您可以获得完整的源代码。部署说明:为了成功部署此系统,您需要遵循以下步骤:a. 安装Java开发环境(JDK)和Maven构建...
项目概述:这是一款基于Flask后端框架与Vue3、ElementPlus前端技术的电商后台管理系统。项目主要采用CSS进行样式设计,共包含165个文件,其中CSS文件44个,确保了界面美观与一致性。技术栈丰富,融合了Python、Vue、...
系统后端使用SpringBoot进行开发,前端则使用Vue.js框架。整个系统包括用户注册、登录、健康打卡、健康评估等功能。 用户注册和登录功能使得每个用户可以拥有自己的账户,方便记录和管理自己的健康信息。健康打卡...
项目概述:基于Flask与Vue.js技术的书评网站开发源码,涉及多语言混合编程。...项目简述:本网站是一个基于Flask框架搭建的后端服务,前端界面则采用了Vue.js进行构建,致力于打造一个内容丰富、交互流畅的书评平台。
GIF动态预览图: 开发环境: E2EE支持库 (已集成) CEF框架(已集成) VUE -https://cn.vuejs.org/ (已集成) NodeJS (已集成) WebPack (已集成) ...界面UI部分是由前端VUE框架构建 如有会这方面的人,可以自行扩展
| Vue2 | 前端js框架 | | vue-router | vue路由 | | Vuex | 状态管理 | | Element-UI | 前端UI组件库 | | axios | http请求库 | | echarts、antv/g2、antv/g6 | 图表可视化库 | | stompjs | websocket库 | | vue-...
源码:包含了后端SpringBoot框架的Java代码和前端Vue.js代码。后端代码主要负责处理业务逻辑、数据库操作等,前端代码则负责页面展示和用户交互。整个项目采用了前后端分离的设计思路,使得开发和维护更加高效。 ...