Vue 单文件组件环境配置、开发和运行

配置环境

安装@vue/cli

npm install -g @vue/cli

检查vue/cli版本

vue --version

安装vue serve

以便使用vue.server和vue.build对*.vue文件进行编译

npm install -g @vue/cli-service-global

运行vue单文件

新建一个test.vue

.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

.vue文件由三部分组成：<template>、<style>、<script>

<template> <div> <h1>Hello Vue!</h1> </div> </template> <script> export default { } </script> <style lang="scss" scoped> </style>

运行test.veu

在test.vue当前路径运行：

vue serve test.vue

打开浏览器查看效果：

编译vue文件

在test.vue当前路径运行：

vue build test.vue

编译完成文件：