1.首先安装依赖,并且在mian.js引入
import {createApp} from 'vue'
//vue代码
const app=createApp({
template:`<h2>我是vue渲染出来的</h2>`
data(){
return {
title:"Hello world"
}}})
app.mount("#app") //挂载到某个地方
2.安装vue3的版本:npm install vue@next
3.VSCode对SFC(单文件组件)的支持
插件一:Vetur, 从Vue2开发就一直在使用的VSCode支持Vue的插件;
插件二:Volar,官方推荐的插件(后续会基于Volar开发官方的VSCode插件)
4.编写App.vue编码
<template>
<h2>我是Vue渲染出来的</h2>
<h2>{{title}}</h2>
</template>
<script>
//倒出一个对象
export default{
data(){
return{}
},
methods:{}
}
</script>
<style>
</style>
5.在main.js里面做倒入
import App from './vue/App.vue';
const app=createApp(App);
app.mount("#app");
后期在编译的时候会出错,出错原因是缺少一个模块,读不出来vue的文件格式,解决方案:
安装vue-loader并且在webpack.config.js里面配置
npm install vue-loader@next -D
然后在打包还是会出错,提示vue-loader 需要依赖@vue/compiler-sfc
安装:@vue/compiler-sfc这个包,真正的对vue文件来做解析
npm install @vue/compiler-sfc -D
你会发现在次打包的时候还是会出错,告知你vue-loader 没有正确使用plugin
并且倒入