Vue传统开发方式（不使用脚手架工具）

bigdata大星星

已于 2022-05-01 11:54:23 修改

阅读量2.6k

点赞数 2

文章标签： vue

于 2022-04-30 23:52:30 首次发布

本文链接：https://blog.csdn.net/u014176695/article/details/124521052

版权

本文介绍了不使用Vue CLI的情况下如何进行Vue.js的传统开发。首先，通过在HTML文件中引入Vue.min.js，然后利用Vue的渐进式特性控制特定元素（如id为'app'的div）。接着，通过Vue的构造函数创建对象并配置el和data，实现数据的双向绑定和响应式更新。Vue的响应式特性使得当data中的属性变化时，页面相应区域能自动更新。后续内容将探讨Vue的组件化特性。

摘要由CSDN通过智能技术生成

1.引入Vue.min.js（本方法需将文件从官网下载至本地）

新建一个html文件，并写好div和script。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bigdata大星星

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

自我学习： vue起步-vue指令（不使用脚手架）

weixin_46075797的博客

06-25

364

Vue指令内容绑定，事件绑定 1. v-test 2. v-html 3. v-on：为元素绑定事件显示切换，属性绑定 4. v-show 5. v-if 6. v-bind列表循环，表单元素绑定 7. v-for 8. v-on 9. v-model1. v-test 与差值表达式功能相似，支持拼接 2.v-html 设置标签的innerHTML，文本情况下与v-text相同 3. v-on 为元素绑定事件如 click、dblclick（双击）、monseenter 案例：计数器要求：在10

不使用脚手架的 vue 应用

weixin_30820151的博客

11-03

404

工作中的项目不止有页面繁多的模块化项目，还会只有一两个页面的类似于填写信息参与活动的活动页。这个时候，就可以回归以前的三剑客模式，在 index.html 里引用 vue.js 进行开发。关键点：引入 babel-polyfill 以转换 es6 的代码，需要作为第一个引入的 script 脚本将所用到的第三方库的 css 和 js 下载到本地引用可以拆分公共组件，通过 script ...

1 条评论您还未登录，请先登录后发表或查看评论

从0搭建一个vue项目，不使用脚手架从html到vue

最新发布

I_am_shy的博客

06-25

1744

但在真实的项目中，仅仅只有这些配置还远远不够，开发时使用脚手架搭建可以快速的让我们编辑项目核心的代码，这里只是展示一个vue项目是如何产生的，深化对vue框架的了解。

vue不使用脚手架，基础写法。

Kane_qqq的博客

05-15

1396

说起来也搞笑，一直都是用脚手架，实际有个h5老项目，不用脚手架，一下子写不来了，所以记录下。 <body> <div id="app"> 内容 </div> </body> <script src="../../resources/lib/vue.min.js"></script> //引入vue文件 <script> var vm= new Vue({ el:"#

不使用脚手架构建vue项目

达拉崩巴斑得贝迪卜多比鲁翁_

07-21

2003

不使用vuecli脚手架搭建vue项目

Vue3.0项目搭建指南不使用cli脚手架（v2）

meis27461的博客

09-02

2874

Vue3.0项目搭建指南前言一、先让Vue3能够运行1.初始化2.安装相关依赖3.编写项目文件和配置webpack 前言本指南作用于帮助开发人员更清晰的了解Vue3.0的常用框架及其生态之间的关系，以及在不借助cli脚手架的情况下一步步将项目组装起来。文中所使用所有相关依赖如下环境以及工具 nodeJS v.14.16.0 - 基于 Chrome V8 引擎的 JavaScript 运行环境 npm v6.14.11 - nodeJS的包管理工具编译依赖 webpack v5.51.1 - 模

全新打包工具parcel零配置vue开发脚手架

11-30

【全新打包工具Parcel与Vue开发脚手架】 Parcel是一款新兴的、零配置的前端构建工具，旨在简化Web应用的构建过程。与传统的Webpack等构建工具相比，Parcel的主要优势在于其开箱即用的特性，无需繁琐的配置文件，极...

jquery在vue脚手架中的使用方式示例

10-19

在使用Vue CLI创建的Vue项目脚手架中，引入jQuery的方式需要特别注意，因为它与传统的引入方式有所不同。首先，Vue项目脚手架使用了Webpack作为模块打包工具。Webpack在处理项目依赖时，会打包所有引入的资源。...

zeta-web-layui是基于vue开发的前端脚手架

06-05

Vite是由Vue.js作者尤雨溪开发的新型前端构建工具，它颠覆了传统的Webpack构建方式，采用按需编译和热更新的模式，大大提升了开发阶段的性能。Vite利用了ES模块的原生特性，可以实现快速的源码到源码的增量编译和热...

不使用脚手架搭建vue项目

Ariel_lj的博客

11-15

6645

不使用脚手架搭建vue项目找到一个需要搭建项目的空文件夹在文件夹中执行命令npm init 生成package.json文件(此处将展示我们的依赖\编译配置等信息) 安装webpack 一vue及vue-loader使webpack能够加载vue文件,并编译为浏览器能够识别的js文件 npm i webpack vue vue-loader 上一步执行完后会提示我们npm WARN vue-loader@15.5.1 requires a peer of css-loader@* but none i

一个已经配置好的TypeScriptVue传统多页面开发模式项目

08-12

一个已经配置好的 TypeScript Vue 传统多页面开发模式项目

vue路由的配置？（不用脚手架）

H_lucky_的博客

09-20

856

在vue路由通过router-link组件进行页面跳转，其实对a标签的封装。

vue的基础总结(vue的非脚手架总结)

qq_52827180的博客

11-10

2848

Vue详细总结1一、Vue的基础用法（不用脚手架）1.vue的data属性在html中引入vue，初始化vue并添加data，data为json数据 key:value2.vue中的插值语法和指令语法插值语法：写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。指令语法：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式且可以直接读取到data中的所有属性。3. vue中数据绑定单向绑定(v-bind)：数据只能从data流向页面。

抛开脚手架搭建vue工程

u011134727的博客

08-28

2023

本期分享了vue如何快速搭建一个工程化的项目，并且是非常的轻量级的。安装对应的依赖，依赖分为三步骤，核心依赖库，构建工具库，.vue文件的编译库在每个文件编写对应的配置，即可完成一个轻量级的vue脚手架的搭建当然，有的同学会问这个从哪里来的，那就请看这里吧。...

不使用cli脚手架搭建vue项目工程(webpack简单配置)

热门推荐

破鞋何苦阑珊的博客

01-14

1万+

前言今天介绍一篇关于工程搭建的文章。主要介绍不用cli脚手架搭建一套前端工程，因为每个公司不是用脚手架工具安装一下就能进行开发了，很多时候都是对工程有一定的定制需求，你没有深入的去了解cli脚手架的话，可能会很吃力，所以这块还是需要有一定的深入了解的，内容也不是太复杂，但是你需要掌握一些vue、webpack、nodejs的简单的基本概念和认识，也挺适合初级者阅读，我们学前端的小伙伴其实都...

从传统开发转向 Vue.js 开发教程基础篇

本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！

04-25

555

从技术角度看，Vue.js 是关注 MVVM 模型的 `ViewModel` 层，它通过双向数据绑定，把 View 层和 Model 层连接起来，通过对数据的操作就可以完成对页面视图的渲染，不再需要开发人员关注 html 渲染层。

从0 搭建vue3+webpack5项目，不使用cli脚手架

dum_plings的博客

04-24

2289

从0搭建vue3+webpack5项目一、初始化 1、先创建一个空文件夹 demo（任意命名）在当面文件夹下打开cmd 命令框输入 npm init -y 初始化项目生成package.json 文件在后面加上 -y 能够让我们省去填写信息的步骤。如果文件夹里面出现了package.json 文件那么说明你成功初始化了项目。二、安装依赖在cmd 命令框中输入 1、安装webpack 注意这里是在本地安装，而不是全局安装。 npm install webpack webpack-cli -

无脚手架搭建vue3.0 + ts

Ariel_lj的博客

03-03

973

无脚手架搭建vue3.0 + ts 一、先让Vue3能够运行 1.初始化 2.安装相关依赖 3.编写项目文件和配置webpack 4.运行项目二、完善开发环境 1.安装html-webpack-plugin 2.安装webpack-dev-server 3.配置开发环境 4.启动项目三、安装各种工具 1.使用less和less的解析器 2.使用Typescript 使用所有相关依赖如下 - 环境以及工具 nodeJS v.14.16.0 - 基于 Chrome V8 引擎的 JavaScript