【前端Vue】Vue安装的四种方式：引用Vue.js文件、使用CDN方法、利用npm方法、命令行工具CLI以及区分Web App、Native App、Hybrid App

最新推荐文章于 2024-04-08 21:12:40 发布

量化Mike

最新推荐文章于 2024-04-08 21:12:40 发布

阅读量1.7k

点赞数 1

分类专栏： NodeJs 文章标签： vue.js 前端 npm javascript Vue

本文链接：https://blog.csdn.net/weixin_43529465/article/details/127759996

版权

NodeJs 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue.js不支持IE 8及以下版本，因为它使用了IE 8无法模拟的ECMAScript 5特性，但它支持所有兼容ECMAScript 5的浏览器。

一、Vue.js的安装

Vue的运行是依赖于Node的npm的管理工具来实现的，所以在搭建Vue的开发环境之前，需要安装Node运行环境。

1、类似于Bootstrap或jQuery，直接通过HTML文件中的标签引用。

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>

2、npm安装方式

初始化项目：npm init
安装vue：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"
	}
}

3、Vue安装的四种方式

(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编写Hello World——CDN方式

安装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——Webpack方式

对于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作为导出的文件。

7、编辑app.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)

8、Hello模块—其文件名为helloworld.vue

	<template>
		<div>
			<p>{{text}}</p>
		</div>
	</template>

	<script>
		export default{
			name: "Hello",
			data(){
				return {
					text: 'HelloWorld!!!'
				}
			}
		}
	</script>

9、打包命令：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模型，都使用组件化的结构。

Vue.js框架的优点如下：

生态丰富，学习成本低；
简单易用；
官方库较多，程序开发风格统一且文档全面；
轻量、高效；
依赖其他开源模块较少，可以简单地实现功能重构；

Vue.js框架的缺点如下：

使用者和贡献者较为单一，GitHub中的使用者大部分是中文使用者；
非官方的小众库不一定支持Vue.js。

React.js的优点如下：

灵活和优秀的响应性；
虚拟DOM使性能得到极大提升；
丰富的JavaScript库，面对全世界的贡献者；
丰富、强大的扩展性；
有Facebook等专业开发人员的支持；
多平台的优势，并且React Native等技术已广泛使用。

React.js的缺点如下：

功能复杂，体积庞大；
学习难度比较高。

五、编写基础的JavaScript代码

基于浏览器中的JavaScript代码（也就是传统网站开发中前端使用的JavaScript代码）去实现一些样式、动画或AJAX请求。
基于Node.js的JavaScript代码。

在Node.js环境中一般通过命令行工具运行代码，不需要浏览器环境。

global对象即为Node.js中的全局对象（类似于浏览器中的Window对象）。
需要注意的是，如果在代码中打印this，this会指向该模块本身（module对象），而其本身并不会指向global对象。

六、NoSQL非关系数据库和 SQL关系数据库

开源数据库有MySQL、MariaDB、PostgreSQL、SQLite、MongoDB、Redis等。

七、区别 Web App、Native App、Hybrid App

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的混合开发。

量化Mike

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【前端Vue】Vue安装的四种方式：引用Vue.js文件、使用CDN方法、利用npm方法、命令行工具CLI以及区分Web App、Native App、Hybrid App

Vue.js不支持IE 8及以下版本，因为它使用了IE 8无法模拟的ECMAScript 5特性，但它支持所有兼容ECMAScript 5的浏览器。
复制链接

扫一扫