Vue脚手架系列01-vue-cli3开发单文件组件

149 阅读1分钟

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 -@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