Vue.js不支持IE 8及以下版本,因为它使用了IE 8无法模拟的ECMAScript 5特性,但它支持所有兼容ECMAScript 5的浏览器。
Vue的运行是依赖于Node的npm的管理工具来实现的,所以在搭建Vue的开发环境之前,需要安装Node运行环境。
Vue.js提供了相关的CDN,通过如下代码可以引用最新版本的Vue.js:<script src="https://cdn.jsdelivr.net/npm/vue"></script>
通过指定版本号,可以引用不同版本的Vue.js: <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
npm init
npm install vue
package.json文件会自动添加Vue.js的依赖项:
{
"name": "2-3-2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.10"
}
}
(1)第一种是下载JavaScript文件并自行托管,直接引用Vue.js文件:<script src=”./vue.js”></script>
(2)第二种是使用CDN方法: <script src="https://unpkg.com/vue@next"></script>
(3)第三种是利用npm方法进行包的安装: <script src="https://unpkg.com/vue@next"></script>
(4)第四种是使用官方的命令行工具CLI来构建一个单页面项目: npm install vue@next
安装Vue.js的两种方式,第一种是通过CDN方式或引入静态文件,通过CDN方式编写Hello World程序较为简单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--显示文字内容-->
{{text}}
</div>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
<!--实例化Vue-->
var vm = new Vue({
el: '#app',//指定属性id里的app
// 数据内容
data: {
text: 'hello world!!!'
}
})
</script>
</body>
</html>
对于Vue.js框架而言,输出一个简单的Hello World程序可能并不简单,浏览器本身不识别后缀为vue的文件,所以vue文件不能通过浏览器直接打开,类似于HTML这样的页面也无法直接引入vue文件。
如果想要使用Vue.js编写程序,需要Webpack打包工具将.vue文件编译成普通的JavaScript文件,再通过页面的引入去执行这个JavaScript文件。
1、新建项目,初始化项目代码:npm init
2、Webpack 是一个前端资源加载/打包工具:npm install webpack
3、使用Webpack的命令行工具:npm install webpack-cli
4、安装vue.js工具:npm install vue
5、安装vue-loader和vue-template-compiler,这样才可以让Webpack识别Vue.js,安装命令如下:npm install vue-loader
和 npm install vue-template-compiler
6、新建一个webpack.config.js文件,用于配置Webpack打包工具。Webpack的配置需要指定入口文件并且引入vue-loader,完整的代码如下:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
//指定入口文件
entry:path.join(__dirname, 'app.js'),
//指定输出的文件位置和文件名称
output: {
path: path.join(__dirname,'dist'),
filename: 'build.js'
},
plugins: [
//在使用新版的vue-loader时,必须引入这个插件
new VueLoaderPlugin()
],
module: {
//指定不同格式的规则
rules: [
//解析.vue文件
{
test: /\.vue$/,
loader: 'vue-loader'
},
]
}
}
这里指定了入口文件导出的位置和引入模块时的一些规则,通过这个配置让Webpack可以编译同级目录中的app.js文件,并且在dist文件夹中建立新的build.js作为导出的文件。
// 引入vue
import Vue from 'vue'
import Hello from './helloworld.vue';
const root = document.createElement('div')
document.body.appendChild(root)
// mount将Hello模块挂载到root根节点中
new Vue({
render: (h) => h(Hello)
}).$mount(root)
<template>
<div>
<p>{{text}}</p>
</div>
</template>
<script>
export default{
name: "Hello",
data(){
return {
text: 'HelloWorld!!!'
}
}
}
</script>
webpack --config webpack.config.js
{
"name": "2-3-2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "",
……
}
10、完成打包操作:npm run build
执行成功后,dist文件夹中会自动生成一个build.js文件。打开该文件后,发现其本身的代码已经经过了完整的编译。
11、在dist文件夹下新建一个HTML文件index.html,用于引入build.js文件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--注意生成的JavaScript文件的地址-->
<script src="build.js"></script>
</body>
</html>
Webpack还存在很多不同的用法,读者可以参考官方文档: https://webpack.js.org/
Vue.js的API参考了AngularJS、KnockoutJS、Ractive.js和Rivets.js。
React.js和Vue.js这两个框架有许多相似之处,二者都是为了与根库一起使用而构建的,并且都是基于Virtual DOM模型,都使用组件化的结构。
在Node.js环境中一般通过命令行工具运行代码,不需要浏览器环境。
global对象即为Node.js中的全局对象(类似于浏览器中的Window对象)。
需要注意的是,如果在代码中打印this,this会指向该模块本身(module对象),而其本身并不会指向global对象。
开源数据库有MySQL
、MariaDB
、PostgreSQL
、SQLite
、MongoDB
、Redis
等。
Native App是一种基于本地(操作系统)运行的App,也称为原生App开发,开发语言为Java、C、Objective-C等。Native App开发是从Android、iOS智能手机出现时就有了的开发技术,性能体验最优,API也比较完善,但是学习起来难度比较高。缺点就是它的开发成本比较大、更新体验较差、同时也比较麻烦,因为每一次发布新的版本,都需要做版本打包,且需要用户手动进行更新。但是它可以调用iOS中的UI控件以及UI方法,实现Web App无法实现的一些比较酷的交互效果。
Web App是基于手机等移动端的浏览器运行的应用,其开发成本较低,使用HTML 5等Web开发技术就可以轻松完成页面开发,由于是Web技术,所以可以在任意平台上运行。它的升级也比较简单并且不需要通知用户,在服务端更新相应的文件即可,用户完全没有感觉,极大地提升了用户体验。相比Native App来说,Web App在使用体验中是受限于网络环境和渲染性能的。因为它的HTML 5页面对网络环境的依赖性较大,如果此时用户恰巧遇到网速慢、网络不稳定等环境干扰,那么请求页面的效率就会极大地降低,因此出现不流畅、断断续续等不良体验。
Hybrid App就是Native结合Web的混合开发。