Vue安装与创建

发布时间：2024年01月19日

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例；
应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

通过CDN使用vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
		</div>
		<script>
			const { createApp, ref } = Vue;
			createApp({
				setup(){
					const msg = '测试';
					return {
						msg
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
		</div>
		<script type="module">
			import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
			createApp({
				setup(){
					const msg = '测试';
					return {
						msg
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>

<script type="importmap">
	{
	    "imports": {
	      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
	    }
	}
</script>
<script type="module">
	import { createApp, ref } from 'vue'
	createApp({
		setup(){
			const msg = '测试';
			return {
				msg
			}
		}
	}).mount('#app');
</script>

使用命令行创建

无论vue2还是vue3都依赖于node.js，安装vue.js前需保证已安装node.js，且版本不低于vue.js需求版本；

vue2

vue不支持ie8及一下版本，因为vue使用了IE8无法模拟的ECMAScript 5 特性；支持所有兼容ECMAScript 5的浏览器；

//vue.js安装; 最新稳定版；
npm install vue@^2
//如果要全局安装执行命令：npm install vue@^2 -g
//指定版本安装：npm install vue@2.x.x -g
//命令行工具CLI脚手架安装
npm install -g @vue/cli
//查看安装的vue信息
npm info vue  或  vue -V
//安装webpack模板
npm install webpack -g
//安装vue-router，vue.js的官方路由
npm install -g vue-router
//创建项目，myVue为项目名
vue init webpack myVue

vue3

node.js版本要求：18.0或更高版本；
创建的项目将使用基于vite的构建设置，并允许我们使用vue的单文件组件；

//安装及创建项目;这里的“@latest”是指按照当前vue的最新版本下载；也可自己指定版本：此命令完成了安装和创建
npm create vue@latest
//命令行工具CLI脚手架安装 npm install -g @vue/cli
//创建项目： vue create 项目名
//进入项目：cd 项目名
//运行项目：npm run dev
//发布生产环境打包：npm run build

在这里插入图片描述

创建vue实例

vue3

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例;
【挂载应用】应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

//根组件模板
<div id="app">
  <button @click="count++">{{ count }}</button>
</div>
<script>
import { createApp } from 'vue'
const app = createApp({
  data(){
  	return{
  		count:0
  	}
  }
})
app.mount('#app')
</script>

vue2

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的;
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>
<script>
import Vue from 'vue'
var vm = new Vue({
	el: '#app',
	data: {
		count: 1
	},
	created: function(){
		console.log('created');
	},
	mounted(){
		console.log('mounted');
	},
})
</script>

vue生命周期介绍

文章来源:https://blog.csdn.net/qq_43628158/article/details/135689265
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章