Vue学习笔记

1.创建Vue项目

创建vue项目
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问：http://localhost:xxxx/

2.项目的打包与发布

2.1打包

npm run build

2.2使用静态服务器工具包

npm install -g serve

serve dist

2.3使用动态web服务器（Tomcat）

修改配置：webpack.prod.conf.js

output:{

publicPath:'/xxx/' //打包文件夹名称

}

重新打包：

npm run build

修改dist文件夹为项目名称：xxx

将xxx拷贝到运行的tomcat的webapps目录下

访问：http：//localhost:8080/xxx

3.Vue文件定义与使用

3.1vue文件的组成

1) 模板页面
<template>
页面模板
</template>
2) JS 模块对象
<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>
3) 样式
<style>
样式定义
</style>

3.2基本使用

1) 引入组件
2) 映射成标签
3) 使用组件标签

<template>
<HelloWorld></HelloWorld>
<hello-world></hello-world>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
components: {
HelloWorld
}
}
</script>