方式一: 引入vue.js
通过页面引入vue.js , 和引入jquery一样.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
方式二: 创建vue项目
创建单独的项目, 前后端通过ajax通讯. 前后端分离.
1.nodejs安装
https://blog.csdn.net/u011561335/article/details/81452157
2.vue安装
# 查看版本
$ npm -v
2.3.0
#安装vue
npm install vue
# 全局安装 vue-cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
方式三 安装cnpm,阿里镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install vue
cnpm install -g vue-cli
window :
C:\Users\kaige\AppData\Roaming\npm\cnpm.cmd install
安装yarn
npm install -g yarn
启动服务
# 创建一个基于 webpack 模板的新项目
$ vue create my-project
$ cd my-project
# 安装依赖
$ npm install
# 启动服务
$ npm run serve
# 编译成html到dist
$ npm run build
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示: