安装Vue不需要任何特殊的工具,使用下面的代码就可以实现:
<!DOCTYPE html> <html lang="en"> <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>Vue</title> </head> <body> <div id="app"></div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: "#app", created() { //这段代码启动时会运行 alert("与vueJs的美好邂逅") } }) </script> </body> </html>
注意:
- 首先有一个ID为app的div元素用于初始化Vue——因为多种原因,不能在body元素上进行初始化。
- 在页面上引用CDN版本的Vue文件。当然也可以下载到本地并引用。
- 创建一个Vue的实例,并将该实例的el属性指向之前提到的div元素。
上述方式适合用于单页面的引用,对于复杂项目希望使用类似webpack这样的打包工具。
- 安装nodeJs。
- 安装webpack。
- 安装vue-cli
- npm install --global vue-cli
- vue init webpack
npm run dev 启动
访问:http://localhost:8080
恭喜——你已经创建了你的第一个Vue工程!