首页>>前端>>Vue->vuejs工具(vuejs开发工具哪个最合适)

vuejs工具(vuejs开发工具哪个最合适)

时间:2023-12-01 本站 点击:0

vue.js开发工具时可以用eclipse吗?

可以,但很少用。

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的

渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。

Vue

的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue

完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API

实现响应的数据绑定和组合的视图组件。

Vue.js是一个MVVM模式的框架,如果读者有angular经验,一定能够很快入门Vue的

vue.js的特点:

易用: 已经会了HTML,CSS,JavaScript?即刻阅读指南即可开始构建应用。

灵活: 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

高效: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化。

二、环境搭建

vue推荐开发环境:

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言。

npm: Nodejs下的包管理器。

webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板。

Vue.js安装

在看教程时里面提到

什么是NPM?

NPM手册-W3Cschool

所以NPM类似conda,不过conda是Python的,属于anaconda;NPM是JavaScript的,属于Node.js。

那什么是Node.js?

Node.js教程-W3Cschool

Node.js 安装配置

安装完看环境变量有没配置,没有的话配置一下:

node.js安装后输入“node -v”提示'node' 不是内部或外部命令,也不是可运行的程序的解决方法

安装完node.js,配置好环境后可以开始vue.js安装了!

参考 安装vue.js的方法 可以再安装上 cnpm 和 vue-cli 脚手架构建工具 。

cnpm和vue-cli 都是直接打开cmd用 npm install 方式安装,不需选择路径。

安装cnpm:

安装vue-cli:

所以继续按照官方教程,安装vue

但是,还是不清楚vue该装在哪。。。

先在node.js的路径下安装试试:

应该没有错吧?

迫不及待要开始了~~~

Vue.js 入门

BootCDN(国内)

unpkg

cdnjs

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。

进入项目,安装并运行:

打开localhost:8080

vue实例:

选项API:

组件化应用构建

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

指令邦定

指令

指令 (Directives) 是带有 v- 前缀的特殊属性

v-bind:

v-on:

v-if

v-for:

v-model:

数据,方法,计算属性,侦听器

生命周期

组件

全局注册

局部注册

组件组合

组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件。

prop 向下传递,事件向上传递

子组件要显式地用 props 选项 声明它预期的数据:

动态邦定prop

单项数据流

Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

自定义事件

每个 Vue 实例都实现了 事件接口 ,即:

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

这里有一个如何使用载荷 (payload) 数据的示例:

官方支持的 vue-router 库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。

Vue.js脚手架的搭建和使用

你将学到以下知识:

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler),分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

它只是一个工具,主要是它已经帮助我们简化了很多复杂操作!例如:

现在的前端,越来越复杂,特别是SPA(single page web application)流行之后,一个应用程序往往会依赖很多其他的模块,或者编译scss、less、stylus等,如果仅仅是靠人来管理是不可能的,这个时候我们必须依赖于webpack来解决。

输入 命令 vue 查看一下 ,有东西说明成功了!(如果没有成功忽略)

安装:webpack模板 (敲黑板!!!!)

出现如下图:

(成功后)cd 到自己的工程名字 (敲黑板!!!!)

可以来解析css

注意:

安装:(用来解析.css文件的loader(style-loader和css-loader))

安装:可以创建和解析less和scss

2.6-webpack-图片字体:

可以使用图标和图片

2.7-webpack-html:

在html文件中自动引入js文件

1、安装webpack后的Vue目录:

2、src目录必须理解

4、列表说明

vue.js是什么

Vue.js:(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

ue.js 是一个用于创建 web 交互界面的。其特点是

1.简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。

2.数据驱动 自动追踪依赖的模板表达式和计算属性。

3.组件化 用解耦、可复用的组件来构造界面。

4.轻量 ~24kb min+gzip,无依赖。

5.快速 精确有效的异步批量 DOM 更新。

6.模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

Vuejs的VueTool工具开启失败解决方案

有时候我们明明打开了devtool设置为true,并按chrome上安装了vueTool后,发现还是没有在控制台里显示vue的tool等问题

1、如果是没有安装vueTool,可以到chrome的扩展里面选择并安装

如果是没有科学上W的话可以github上手动down下仓库来安装

然后就是扩展Chrome插件

打开Chrome浏览器 选择更多工具扩展程序打开开发者模式

点击加载已解压的扩展程序, 找到刚才生成的chrome文件夹,选择 vue-devtools shells chrome 放入, 安装成功如上面的图1

下方是可能可以看到vueTool了,但是在控制台就是出不来的情况

2、检查下vue.config.js的devtool是否打开,默认是true,看看是不是在非生产环境也设置为false了

3、检查看看是否有手动启用CDN加速Vuejs的文件,按官网说的,我们开发环境也需要使用开发版本的vuejs,否则很多警告就会不生效,比如props的校验器等

检查public.html的vuejs引用(如果是按脚手架的则无需关注)

确认以上问题以后,我们重新安装依赖并且重新跑脚手架编译。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/6583.html