Vue环境离线配置

Vue是一款前端框架，它的环境配置有两种，一种是线上环境下引入Vue库，一种是离线配置Vue环境。

若是在线环境下使用Vue，可以在HTML中引入VueCDN链接，简单轻便。但是若是要做离线开发的话，我们则需要下载Vue库到本地，以便在本地进行开发。

首先需要去Vue官网下载最新版的Vue.js，下载完成后，将下载下来的“vue.js”放置到我们的项目目录中。

project	├── ...	├── js	│   ├── vue.js	│   └── ...	├── ...

然后创建一个HTML文件，在其头部引入vue.js：

!DOCTYPE html>
    	html>
    	head>
    title>
    Vue demo/title>
    script src="./js/vue.js">
    /script>
    	/head>
    	body>
	...

引入Vue后，需要在项目中创建一个Vue实例。Vue实例是 Vue 最重要的基础概念之一，它是一个构造函数，接受一个选项对象作为参数。

下面是基本的Vue实例创建模板：

var vm = new Vue({
// Vue实例的选项	}
)

其中，vm是我们创建Vue实例时获取的变量名，开发中可以根据自己的需求来命名，常见的有app、vue等。

选项对象是一个包含不同配置选项的JavaScript对象，下面是一个常见的选项对象：

var vm = new Vue({
// 选项el: '#app',data: {
message: 'Hello Vue!'}
	}
    )

以上Vue实例选项中，el用于指定挂载到某个元素，data用于定义初始数据，message就是初始数据。挂载元素需要在HTML中指定：

div id="app">
{
{
 message }
}
    	/div>
    

最后，在代码编辑器中使用npm start启动本地服务器，运行前面创建的HTML文件，在浏览器中打开页面，就可以在浏览器的控制台中看到“Hello Vue!”

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！