一.准备
项目构建参考《前端实践项目 目录》,不推荐新手直接使用vue-cli。
二.安装
npm安装vue2。
npm install vue@2.6.11 --save
webpack编译时会识别不了.vue文件,所以需要安装相关插件。
npm install vue-loader@14.2.2 --save-dev npm install vue-template-compiler@2.6.14 --save-dev
三.代码
定义一个元素来挂载vue对象。
<div id="app"></div>
创建vue对象绑定到div上。
import Vue from 'vue' import App from './test/App.vue' new Vue({ el: '#app', render: h => h(App) })
App.vue组件。
<template> <div>hello world</div> </template> <script> export default { components: {}, data() { return { }; }, mounted() {}, methods: { }, }; </script>
开启服务,就能在网页上看到hello world。