安装使用 vue
如果是简单实用 vue 的话, 可以直接引用 JS 文件.
但是在构建大型项目的时候推荐使用 NPM 安装, NPM 能够很好的和诸如 webpack 或 Browserify 模块打包器配合使用, 同时 Vue 也提供配套工具来开发单文件组件.
安装 Node.JS
由于 NPM(Node.JS package manager) 是 Node.JS 的包管理器, 所以要首先安装 Node.JS, 从官网下载相应版本安装即可 https://nodejs.org/en/download/.
安装好后打开命令行工具, 输入 node 就进入 Node.JS 的命令模式了:
- C:\Users\wangjun>node
- 1+2
- 3
按两次 Ctrl+C 或者输入. exit 就可以退出命令行了.
安装淘宝 NPM 镜像
由于在国内 NPM 的安装速度太慢, 因此可以使用淘宝镜像及其命令 cnpm 来安装各种包.
安装 NPM 淘宝镜像:
NPM install -g cnpm --registry= https://registry.npm.taobao.org/
安装完成后, 后面就可以使用 cnpm 命令来安装 NPM 包了.
cnpm install {package name}
安装 VUE
安装稳定版
cnpm install vue
安装完成后默认在用户路径下:
C:\Users{user_name}\node_modules
在 vue 包的 dist / 目录下可以看到 Vue.JS 的各种版本, 其中带 min 的是生产环境的版本, 比开发版本 vue.JS 压缩了很多, 并且删除了警告.
使用 VUE
新建三个文件, 其中 vue.JS 需要从网上下载:
my.html
my.JS
vue.JS
4.1 新建 my.HTML
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- my HTML
- </title>
- </head>
- 前端交流学习; 582735936
- <body>
- <div id="app">
- {{message}}
- </div>
- </body>
- <script type="text/javascript" src="vue.js">
- </script>
- <script type="text/javascript" src="my.js">
- </script>
- </HTML>
4.2 新建 my.JS
- var app1 = new Vue({
- el: '#app',
- data: {
- message: 'Hello Vue!'
- }
- })
- Uncaught ReferenceError: Vue is not defined
- at my.JS:1
- [Vue warn]: Cannot find element: #App
来源: http://www.qdfuns.com/article/51116/8562a70e1985723c4c4d9ca7ef2e347a.html