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引用(如果是按脚手架的则无需关注)
确认以上问题以后,我们重新安装依赖并且重新跑脚手架编译。