Vue开发系列——如何使用Vue
目录
方法一：在html中使用Vue
方法二(大项目推荐)：使用构建工具（如Webpack或Vue CLI）
方法三(小项目推荐)： html中使用vue和elementUI
方法一：在html中使用Vue
你可以通过在HTML文件中直接使用Vue的CDN链接来开始使用Vue。
适合： 简单项目
比如，可以创建一个.html文件，然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>或者
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>html类似：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Example</title><!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app">{{ message }}</div><script>// 创建一个Vue实例var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}});</script>
</body>
</html>方法二(大项目推荐)：使用构建工具（如Webpack或Vue CLI）
适合：更复杂的应用程序，方便快速搭建项目、处理所有依赖关系、编译和打包等
使用前：
先安装了Node.js和npm；
使用npm安装Vue CLI(npm install -g @vue/cli);
创建Vue项目：vue create my-vue-project
进入项目+启动开发服务器：
cd my-vue-project
npm run dev
方法三(小项目推荐)： html中使用vue和elementUI
适合： 快速开发页面，elementui是一个非常丰富的UI组件
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-button @click="visible = true">按钮</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div>
</body>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false,tableData: [{date: '2016-05-02',name: '王王',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '李晓',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '赵武',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王柳',address: '上海市普陀区金沙江路 1516 弄'}]}
}
})
</script>
</html>