欢迎光临小鱼网个人网站!

登录/注册
Vue环境安装

1、安装Vue

npm install vue
或者
npm install --global vue-cli

初始化项目

vue init webpack myproject

进入到项目目录下

cd myproject
npm install
npm run dev


2、标签引入

<html>
 <head>
 <script type = "text/javascript" src = "vue.min.js"></script>
 </head>
 <body></body>
</html>

免费的cdn服务

//对于原型设计或学习目的,可以使用最新版本:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
//对于生产环境下,可以使用带有版本号的稳定版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

使用本机模块(为了兼容模块)


<script type="module">
 import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>Document</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 </head>
 <body>
 <div id="intro" style="text-align:center;">
 <h1>{{ message }}</h1>
 </div>
 <script type="text/javascript">
 var vue_det = new Vue({
 el: "#intro",
 data: {
 message: "Hello World!"
 }
 });
 </script>
 </body>
</html>


Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。