天天看点

在零配置的情况下,怎么启动、打包一个.vue文件?

在零配置的情况下,怎么启动、打包一个.vue文件?

问题

比如我们在开发一个组件,以及做一些小demo的时候,怎么快速启动服务?

解决

1、安装拓展

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

2、新建vue文件

建立一个vue-test文件夹,在里面新建一个kaimo.vue文件,写上vue代码。
<template>
  <div class="kaimo">{{ msg }}</div>
</template>
<script>
export default {
    data() {
        return {
            msg: 'kaimo 666!'
        }
    }
}
</script>
<style>
.kaimo {
    color: green;
    font-size: 48px;
}
</style>      

3、启动服务

打开vscode的终端,输入下面的命令然后回车。
vue serve kaimo.vue      
在零配置的情况下,怎么启动、打包一个.vue文件?

4、启动成功

启动成功之后,vue-test文件夹里会多一个node_modules文件夹,ctrl+鼠标左键,点击链接就会出现下面页面。
在零配置的情况下,怎么启动、打包一个.vue文件?

5、打包

vue build kaimo.vue