Vue.js入门之工程目录介绍

简介: Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

关于Vue环境搭建的内容,本文不再介绍,不清楚的同学可以访问Vue环境搭建或者查看官网相关内容的介绍: 
https://cn.vuejs.org/v2/guide/installation.html

初始化项目

首先,我们使用如下的命令创建一个Vue项目。​

​然后项目会有一些初始化的设置,该部分内容的具体含义如下:

Target directory exists. Continue? (Y/n) :直接回车默认(然后会下载 
vue2.0模板);

Project name (vue-test) :项目名称,直接回车默认;

Project description (A Vue.js project) :Vue项目描述,直接回车默认;

Author:项目拥有者名称,直接回车默认;

Use ESLint to lint your code? n:是否启用eslint检测,选择”N”;

pick an eslint preset: 默认Standard;

setup unit tests with karma + mocha?N:是否需要添加单元测试,选择不需要;

setup e2e tests with Nightwatch?N:是否需要添加E2E测试,选择不需要。 

​然后打开终端,执行“npm install”命令安装依赖库。

​如果开发中需要安装一些额外的第三方库,可以使用如下面的命令:​

​然后使用下面的命令启动或者发布项目

​Vue目录结构介绍

打开新建的Vue项目,其目录结构如下图所示。

在上面的文件结构中,重点注意下面的内容:

index.html文件入口;

src放置组件和入口文件;

node_modules为依赖的模块;

config中配置了路径端口值等;

build中配置了webpack的基本配置、开发环境配置、生产环境配置等。

Vue基础指令

Vue内置了很多有用的指令,这些指令通常作用在HTML元素上以v-开头,可将指令视作特殊的HTML属性(attribute)。下面就一些常用的指令给大家简单介绍下。

v-if指令

条件判断指令,根据表达式值的真假来插入或删除元素,表达式返回一个布尔值。语法规则如下:​

​例如有下面一个实例

​运行结果为:

v-show指令

条件渲染指令,与v-if不同的是,无论v-show的值为true或false,元素都会存在于HTML代码中;而只有当v-if的值为true,元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值,v-show指令的语法如下:​

​例如:

可配合v-if或v-show使用,v-else指令必须紧邻v-if或v-show,否则该命令无法正常工作。v-else绑定的元素能否渲染在HTML中,取决于前面使用的是v-if还是v-show。若前面使用的是v-if,且v-if值为true,则v-else元素不会渲染;若前面使用的是v-show,且v-show值为true,则v-else元素仍会渲染到HTML。

v-for指令

循环指令,基于一个数组渲染一个列表,与JavaScript遍历类似。语法格式如下:​

​例如,在数组todos,依次遍历数组todos中的每个元素,将text部分显示。

v-bind指令

v-bind用于给DOM绑定元素属性。例如:

​其中,argument通常是HTML元素的特性,如:v-bind:class=”expression”。 
v-bind指令可以缩写为:冒号。

v-on指令

v-on用于监听DOM事件,语法与v-bind类似,如监听点击事件。​

​其中,v-on指令可以缩写为@符号。如:@click=”doSth”。

附: 
vue.js 官网:https://vuejs.org/ 
vue.js 中文网: http://vuefe.cn/ 
vue-router 文档:http://router.vuejs.org/zh-cn/index.html/ 
vuex 文档:http://vuex.vuejs.org/ 
webpack 文档:https://webpack.github.io/docs/ 
ES2015 入门教程:http://es6.ruanyifeng.com/ 
scss 文档: 
http://sass-lang.com/documentation/file.SASS_REFERENCE.html 
mocha 文档: http://mochajs.org/ 
express 中文官网:http://expressjs.com/zh-cn/


​本文摘自异步社区,作者xiangzhihong,作品《Vue.js入门之工程目录介绍 》,未经授权,禁止转载。

推荐阅读

2018年5月新书书单(文末福利)

2018年4月新书书单

异步图书最全Python书单

一份程序员必备的算法书单

第一本Python神经网络编程图书

​长按二维码,可以关注我们哟

每天与你分享IT好文。


在“异步图书”后台回复“关注”,即可免费获得2000门在线视频课程;推荐朋友关注根据提示获取赠书链接,免费得异步e读版图书一本。赶紧来参加哦!

点击阅读原文,查看更多

阅读原文


相关文章
|
12月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
3080 2
|
8月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
310 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
7月前
|
JSON JavaScript 前端开发
菜鸟之路Day23一一JavaScript 入门
本文介绍了 JavaScript 的基础内容,包括 JS 的引入方式、基础语法、数据类型、运算符、类型转换、函数、对象(如 Array、String、自定义对象、JSON、BOM 和 DOM)、事件监听,以及 Vue 框架的初步使用。重点讲解了内部和外部脚本的引入、变量声明(var、let、const)、常见输出语句、数组与字符串的操作方法、DOM 操作及事件绑定,并通过实例展示了 Vue 的双向数据绑定和常用指令(v-bind、v-model、v-on、v-if、v-for 等)。
170 7
|
7月前
|
数据采集 资源调度 JavaScript
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
|
9月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
211 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
460 12
|
10月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
11月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
490 10
|
11月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
1410 1
|
12月前
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
225 5