1、創(chuàng)建vue項目

??????vue init webpack 項目名

2、打開文件HelloWorld.vue

3、編寫代碼

將template修改成：

??<template>

? <div class="hello">

? ? <h1>{{ msg }}World</h1>

? </div>

</template>

將script修改成：

<script>

export default {

? ? name:'HelloWorld',

? ? data () {

? ? ? return {

? ? ? ? msg: 'Hello'

? ? ? }

? ? }

}

</script>

將style scoped 修改成：

<style scoped>

h1{

? font-weight: normal;

}

</style>

5、運行項目

npm run dev

出現(xiàn)報錯

解決方法：https://blog.csdn.net/qq_41999034/article/details/109078474

也可以在項目創(chuàng)建時選擇不使用ESlint語法。

Use ESLint to lint your code? (Y/n)；使用ESlint語法？（Y/ N）。選N。

最終效果：

總結(jié)：

?helloworld.vue里面，由三部分組成：template、script、style scoped

分別對應(yīng)： HTML、script、css