Vue开发模板简介

1. 传统发开模式的问题

用传统模式引用vue.js以及其他的js文件的开发方式，会产生一些问题。

基于页面的开发模式：传统的引用vue.js以及其他的js文件的开发方式，限定了我们的开发模式是基于页面的，而不是基于组件的，组件的所有代码都直接写在页面中，这对于一些复杂的页面来说，不是好事情，代码的可读性会较差，也不便于管理。

组件无法重用：传统模式定义在HTML页面中的组件，无法被其他页面重用。我们只能通过复制粘贴的方式将组件代码拷贝到其他页面，这也违反了DRY原则。既然组件是Vue.js的重要概念，我们就应该利用好它。

2. Vue.js提供的开发模板

为了解决上述问题，Vue.js官方提供了一些开发模板，使我们能够快速地配置好vue.js的开发环境。基于这些开发模板，将使用.vue文件定义组件，使组件代码从HTML页面代码中分离出来。

Vue.js官方提供的模板分类：

类型	简单模式	完全模式
基于vue-cli和browserify的项目模板	vue-webpack-simpl	vue-webpack
基于vue-cli和webpack的项目模板	browserify-simple	browserify

简单模式：仅包含基vue.js开发必要的一些资源和包，使用该模式可以快速地投入到开发。

完全模式：除必要的资源和包外，还包括ESLink、单元测试等功能。

时间： 2024-08-11 07:43:03

Vue开发模板简介的相关文章

webpack+vue开发环境搭建

前提: 1.安装必要工具(node等); 2.安装全局vue-cli脚手架(快速搭建vue开发模板) 命令:npm install -g vue-cli 3.安装webpack 命令:npm install webpack -g (有问题可以使用npm install --save-dev webpack-cli -g命令) 4.运行命令: vue init webpack 项目名注:回车后可能显示 Command vue init requires a global addon to be

vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释自动生成文件名开发日期时间等内容

vue文件模板模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used t

【转】[总结]vue开发常见知识点及问题资料整理（持续更新）

1.(webpack)vue-cli构建的项目如何设置每个页面的title 2.vue项目中使用axios上传图片等文件 3.qs.stringify() 和JSON.stringify()的区别以及在vux中使用post提交表单数据需要qs库序列化 4.vue中实现全局的setCookie,getCookie以及delCookie方法笔记 5.webpack中alias配置中的"@"是什么意思? 6.webpack proxyTable 代理跨域 7.如何在 vue 项目里正确地引用

【原创】win10下搭建vue开发环境+IIS部署

[原创]win10下搭建vue开发环境如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. node.js的官方地址为:https://nodejs.org/en/download/,如下图所示: 根据自己电脑的具体配置,选择你要下载的安装

vue开发后台管理系统小结

最近工作需要用vue开发了后台管理系统,由于是第一次开发后台管理系统,中间也遇到了一些坑,想在这里做个总结,也算是对于自己工作的一个肯定.我们金融性质的网站所以就不将代码贴出来哈一.项目概述首先工作需求是这样的,开发一个公司的总后台,包含各个不同的模块,总体难度一般,没有开发ui图,用的vue-cli .elementui框架.webpack打包. 总需求的思维导图见链接 http://naotu.baidu.com/file/e8c31b43dfb2f18a3c523e0fa1393c0

搭建vue开发环境的步骤,六步完成

搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:http://nodejs.cn:注意是32还是64位:二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号. 三:淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:npm install --global

使用 Vue 开发 Weex 页面

Vue & Weex 介绍 Vue.js 是 Evan You 开发的渐进式 JavaScript 框架,在易用性.灵活性和性能等方面都非常优秀.开发者能够通过撰写 *.vue 文件,基于 <template>, <style>, <script> 快速构建组件化的 web 应用. Vue.js 在 2016 年 10 月正式发布了 2.0 版本,该版本加入了 Virtual-DOM 和预编译器的设计,使得该框架在运行时能够脱离 HTML 和 CSS 解析,只依

C++ 宏和模板简介

参考<21天学通C++>第14章节,对C++中的宏和模板进行了学习,总结起来其主要内容如下: (1) 预处理器简介 (2) 关键字#define与宏 (3) 模板简介 (4) 如何编写函数模板和模板类 (5) 宏和模板之间的区别 (6) 使用static_assert进行编译阶段检查 **********************************************************************************************************

面试官：自己搭建过vue开发环境吗？

转自大佬:不懂代码的攻城师开篇前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后npm run install 安装依赖,npm run serve启动项目然后就开始写业务代码了. 但是对项目里的webpack封装和配置了解的不清楚,容易导致出问题不知如何解决,或者不会通过webpack去扩展新功能. 该篇文章主要是想告诉小伙伴们,如何一步一步的通过 webpack4来搭建自己的vue开发环