Vue.component('组件名',{
})
new Vue({})
缺点
- 全局定义组件的名字时不能重复
- 字符串模板 es6提供了模板字符串 \
- 不支持css
- 没有构建步骤 Pug Babel .vue
在vue中把.vue的文件称为 单文件组件,webpack等构建工具
Vue CLI3 脚手架
基本配置
- 安装Nodejs
- 保证
Node.js8.9或更高版本 - 终端中输入
node -v,保证已安装成功
- 保证
- 安装淘宝镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org- 以后的
npm可以用cnpm代替
- 安装Vue Cli3脚手架
cnpm install -g @vue/cli
- 检查其版本是否正确
vue --version
快速原型开发
使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:
cnpm install -g @vue/cli-service-global
vue serve 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。
需要的仅仅是一个 App.vue 文件:
<template>
<div>
<h2>hello world 单页面组件</h2>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
</style>
然后在这个 App.vue 文件所在的目录下运行:
vue serve