├── .gitignore
├── README.md
├── package.json
├── public
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   ├── Menu.js
    │   ├── MyButton.vue
    │   ├── Position.js
    │   └── child.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── views
    │   ├── About.vue
    │   ├── Computed.vue
    │   ├── Dad.vue
    │   ├── Father.vue
    │   ├── Home.vue
    │   ├── Life.vue
    │   └── Parent.vue
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | tmp/
 5 | log/
 6 | static/upfiles/*
 7 | npm-debug.log*
 8 | yarn-debug.log*
 9 | yarn-error.log*
10 | **/*.log
11 | 
12 | tests/**/coverage/
13 | tests/e2e/reports
14 | selenium-debug.log
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.local
24 | 
25 | package-lock.json
26 | yarn.lock
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue3.0 Composition API 入门教程
 2 | 
 3 | 光阴荏苒，vue3.0已经进入了 beta 版本了。很多朋友说，你该出个系列的教程了，毕竟当年我写得 vue 2.0 的系列的博文在网上影响并不小。那就写吧，我力求简洁明了的把新的知识点都覆盖到。
 4 | 
 5 | ## 安装以及运行
 6 | 
 7 | ```bash
 8 | # clone 项目
 9 | git clone https://github.com/fengcms/vue3-demo
10 | # 进入项目文件夹
11 | cd vue3-demo
12 | # 安装依赖
13 | npm i
14 | # 运行开发环境
15 | npm run dev
16 | # 编译代码
17 | npm run build
18 | ```
19 | 
20 | 文章目录地址 https://blog.csdn.net/fungleo/category_10020552.html
21 | 
22 | ## 文章目录：
23 | 
24 | 1. [vue3.0 Composition API 上手初体验 构建基本项目开发环境](https://blog.csdn.net/FungLeo/article/details/106208252)
25 | 2. [vue3.0 Composition API 上手初体验 构建 vue 基础代码](https://blog.csdn.net/FungLeo/article/details/106208323)
26 | 3. [vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用](https://blog.csdn.net/FungLeo/article/details/106208378)
27 | 4. [vue3.0 Composition API 上手初体验 神奇的 setup 函数 (一) 响应数据的绑定](https://blog.csdn.net/FungLeo/article/details/106208437)
28 | 5. [vue3.0 Composition API 上手初体验 神奇的 setup 函数 (二) 响应对象数据的绑定](https://blog.csdn.net/FungLeo/article/details/106208494)
29 | 6. [vue3.0 Composition API 上手初体验 神奇的 setup 函数 (三) 生命周期函数](https://blog.csdn.net/FungLeo/article/details/106208514)
30 | 7. [vue3.0 Composition API 上手初体验 神奇的 setup 函数 (四) 计算属性 computed](https://blog.csdn.net/FungLeo/article/details/106208574)
31 | 8. [vue3.0 Composition API 上手初体验 普通组件的开发与使用](https://blog.csdn.net/FungLeo/article/details/106208611)
32 | 9. [vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化](https://blog.csdn.net/FungLeo/article/details/106215722)
33 | 10. [vue3.0 Composition API 上手初体验 函数组件的开发与使用](https://blog.csdn.net/FungLeo/article/details/106208639)
34 | 11. [vue3.0 Composition API 上手初体验 用路由循环，做个导航菜单](https://blog.csdn.net/FungLeo/article/details/106211657)
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-demo",
 3 |   "version": "1.0.0",
 4 |   "description": "一个基于vue3的demo演示",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server",
 8 |     "build": "webpack --env.prod"
 9 |   },
10 |   "keywords": [
11 |     "vue3"
12 |   ],
13 |   "author": "FungLeo",
14 |   "license": "MIT",
15 |   "dependencies": {
16 |     "vue": "^3.0.0-beta.13",
17 |     "vue-router": "^4.0.0-alpha.11"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/compiler-sfc": "^3.0.0-beta.13",
21 |     "clean-webpack-plugin": "^3.0.0",
22 |     "css-loader": "^3.5.3",
23 |     "html-webpack-plugin": "^4.3.0",
24 |     "node-sass": "^4.14.1",
25 |     "sass-loader": "^8.0.2",
26 |     "style-loader": "^1.2.1",
27 |     "vue-loader": "^16.0.0-beta.2",
28 |     "webpack": "^4.43.0",
29 |     "webpack-cli": "^3.3.11",
30 |     "webpack-dev-server": "^3.11.0"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>VUE 3.0 Demo</title>
 8 | </head>
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 菜单 -->
 3 |   <ul>
 4 |     <li v-for="item in menus">
 5 |       <router-link :to="item.link">{{ item.name }}</router-link>
 6 |     </li>
 7 |   </ul>
 8 |   <hr>
 9 |   <!-- 路由视图 -->
10 |   <router-view />
11 | </template>
12 | <script>
13 | // 引入 Menu 组件
14 | import Menu from '@/components/Menu.js'
15 | 
16 | export default {
17 |   setup () {
18 |     // 获取菜单数据并返回
19 |     const menus = Menu()
20 |     return {
21 |       menus
22 |     }
23 |   }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/components/Menu.js:
--------------------------------------------------------------------------------
 1 | // 引入路由
 2 | import router from '@/router'
 3 | // 导出为函数
 4 | export default () => {
 5 |   // 通过 getRoutes() 函数，获取所有的路由信息
 6 |   const routes = router.getRoutes()
 7 |   console.log(routes)
 8 |   const links = []
 9 |   // 循环路由信息，将数据整理并 push 到 links 数组
10 |   routes.forEach((route, index) => {
11 |     links.push({
12 |       name: route.meta.title || `未命名${index}`,
13 |       link: route.path
14 |     })
15 |   })
16 |   // 将 links 数组返回
17 |   return links
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/MyButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="my-button"
 4 |     :class="[
 5 |         type ? `my-button-type-${type}` : '',
 6 |         size ? `my-button-size-${size}` : '',
 7 |         disabled ? 'my-button-disabled' : ''
 8 |       ]"
 9 |     :style="width ? `width: ${width};` : ''"
10 |     @click="handleClick"
11 |     >
12 |     <slot />
13 |   </div>
14 | </template>
15 | <script>
16 | export default {
17 |   name: 'MyButton',
18 |   // 定义 props 入参的数据类型以及默认值，和 vue 2.0 是一致的
19 |   props: {
20 |     type: {
21 |       type: String,
22 |       default: 'default' // default primary
23 |     },
24 |     size: {
25 |       type: String,
26 |       default: 'default' // default medium small mini
27 |     },
28 |     disabled: {
29 |       type: Boolean,
30 |       default: false
31 |     },
32 |     width: {
33 |       type: String,
34 |       default: ''
35 |     }
36 |   },
37 |   // 拿 props, 可以从函数入参里面拿
38 |   // emit 可以从第二个参数中展开获取
39 |   setup (props, ctx) {
40 |     const { disabled } = props
41 |     const { emit } = ctx
42 |     // 将点击事件 emit 给父组件
43 |     const handleClick = () => {
44 |       !disabled && emit('onClick')
45 |     }
46 |     return {
47 |       handleClick
48 |     }
49 |   }
50 | }
51 | </script>
52 | <style lang="scss">
53 | .my-button {
54 |   display: inline-block;text-align: center;
55 |   box-sizing: border-box;line-height: 1;
56 |   cursor: pointer;user-select:none;
57 |   border: 1px solid;border-radius: 5px;color: #fff;
58 |   & + & {
59 |     margin-left: 5px;
60 |   }
61 |   &-type {
62 |     &-default {
63 |       border-color: #ddd;background: #f0f0f0;color: #555;
64 |     }
65 |     &-primary {
66 |       border-color: #409eff;background: #409eff;
67 |     }
68 |   }
69 |   &-size {
70 |     &-default {
71 |       padding: 12px 15px;font-size: 16px;
72 |     }
73 |     &-medium {
74 |       padding: 8px 12px;font-size: 14px;
75 |     }
76 |     &-small {
77 |       padding: 5px 8px;font-size: 12px;border-radius: 3px;
78 |     }
79 |     &-mini {
80 |     	padding: 3px 5px;font-size: 12px;border-radius: 3px;
81 |     }
82 |   }
83 |   &-disabled {
84 |     opacity: .7;
85 |   }
86 |   &:hover {
87 |     opacity: .8;
88 |   }
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/Position.js:
--------------------------------------------------------------------------------
 1 | // 函数式组件， 该组件会返回鼠标在屏幕上的坐标值
 2 | // toFefs 是将 reactive 对象的所有 key 都转化为 ref 值
 3 | // 这样，在引入使用的组件中，就可以 用 const { x, y } = xx 来使用这些 key 对应的 value 了
 4 | import { onMounted, onUnmounted, reactive, toRefs } from 'vue'
 5 | 
 6 | // 这里导出，就不是对象，而是一个函数了。
 7 | export default () => {
 8 |   // 定义一个准备导出的对象数据
 9 |   const position = reactive({
10 |     x: 0,
11 |     y: 0
12 |   })
13 |   // 定义一个会改变数据的函数
14 |   const update = page => {
15 |     position.x = page.pageX
16 |     position.y = page.pageY
17 |   }
18 |   // 使用生命周期，绑定和移除事件
19 |   onMounted (() => {
20 |     window.addEventListener('mousemove', update)
21 |   })
22 |   onUnmounted (() => {
23 |     window.removeEventListener('mousemove', update)
24 |   })
25 |   // 将 reactive 对象 转化为 ref 响应式的值，并返回
26 |   return toRefs(position)
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/child.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <table>
 3 |     <tr>
 4 |       <th>默认插槽：</th>
 5 |       <td><slot /></td>
 6 |     </tr>
 7 |     <tr>
 8 |       <th>具名插槽：</th>
 9 |       <td><slot name="footer" /></td>
10 |     </tr>
11 |     <tr>
12 |       <th>传参插槽：</th>
13 |       <td><slot name="bottom" :color="color" /></td>
14 |     </tr>
15 |     <tr>
16 |       <th>传对象参插槽：</th>
17 |       <td><slot name="object" v-bind="{ old, name }" /></td>
18 |     </tr>
19 |     <tr>
20 |       <th>换个语法传参：</th>
21 |       <!-- 这个语法我个人不推荐 -->
22 |       <td><slot name="object" :="{ old, name }" /></td>
23 |     </tr>
24 |   </table>
25 | </template>
26 | <script>
27 | export default {
28 |   setup () {
29 |     return {
30 |       color: 'red',
31 |       old: 34,
32 |       name: 'FungLeo'
33 |     }
34 |   }
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | // 将创建的 App 搞个别名
 6 | const app = createApp(App)
 7 | 
 8 | // 使用路由配置
 9 | app.use(router)
10 | 
11 | // 挂载运行
12 | app.mount('#app')
13 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | // 可以根据路由模式的不同，后面俩可以只引用一个
 2 | import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
 3 | import Home from '@/views/Home.vue'
 4 | 
 5 | // 构建我们的页面路由配置，可以看到，这里和原来的写法并无二致。
 6 | const routes = [
 7 |   {
 8 |     path: '/',
 9 |     component: Home,
10 |     meta: { title: '首页-响应式数据计数器 Demo' }
11 |   }, {
12 |     path: '/about',
13 |     component: () => import('@/views/About.vue'),
14 |     meta: { title: '关于我们-响应式对象数据 Demo' }
15 |   }, {
16 |     path: '/life',
17 |     component: () => import('@/views/Life.vue'),
18 |     meta: { title: '生命周期 Demo' }
19 |   }, {
20 |     path: '/computed',
21 |     component: () => import('@/views/Computed.vue'),
22 |     meta: { title: '计算属性 Demo' }
23 |   }, {
24 |     path: '/parent',
25 |     component: () => import('@/views/Parent.vue'),
26 |     meta: { title: '普通组件 Demo' }
27 |   }, {
28 |     path: '/father',
29 |     component: () => import('@/views/Father.vue'),
30 |     meta: { title: '函数组件 Demo' }
31 |   }, {
32 |     path: '/dad',
33 |     component: () => import('@/views/Dad.vue'),
34 |     meta: { title: '具名插槽组件 Demo' }
35 |   }
36 | ]
37 | 
38 | // 用 history 模式构建路由
39 | // const routerHistory = createWebHistory()
40 | 
41 | const router = createRouter({
42 |   // 使用 hash 模式构建路由（ url中带 # 号的那种)
43 |   history: createWebHashHistory(),
44 |   // 使用 history 模式构建路由 （ url 中没有 # 号，但生产环境需要特殊配置）
45 |   // history: createWebHistory(),
46 |   routes
47 | })
48 | export default router
49 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <dl>
 3 |     <dt>{{state.name}}</dt>
 4 |     <dd>性别：{{state.sex}}</dd>
 5 |     <dd>地址：{{state.address}}</dd>
 6 |   </dl>
 7 |   <button @click="addressChange">更新地址</button>
 8 | </template>
 9 | <script>
10 | // reactive 是 vue 3.0 的一个重大变化，其作用为创建响应式的对象或数组
11 | import { reactive } from 'vue'
12 | // 导出依然是个对象，不过对象中只有一个 setup 函数
13 | export default {
14 |   setup () {
15 |     // 定义一个 state 的响应式对象数据，并赋值
16 |     const state = reactive({
17 |       name: 'FungLeo',
18 |       sex: 'boy',
19 |       address: '上海'
20 |     })
21 |     console.log(state)
22 |     // 定义一个函数，修改 state 的值。
23 |     const addressChange = () => {
24 |       state.address += '浦东'
25 |     }
26 |     // 导出一些内容给上面的模板区域使用
27 |     return {
28 |       state,
29 |       addressChange
30 |     }
31 |   }
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/views/Computed.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
 4 |     右边的数字是上面的数字的十倍 >>> <span class="red">{{bigCount}}</span> <br>
 5 |     右边的数字是上面的数字的一百倍 >>> <span class="red">{{computeCount['100x']}}</span> <br>
 6 |     右边的数字是上面的数字的一千倍 >>> <span class="red">{{computeCount['1000x']}}</span> <br>
 7 |     <button @click="countAdd">点这个按钮上面的数字会变</button>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | // 需要使用计算属性，也需要从 vue 中导出引入
13 | import { ref, computed } from 'vue'
14 | // 导出依然是个对象，不过对象中只有一个 setup 函数
15 | export default {
16 |   setup () {
17 |     // 定义一个 count 的响应式数据，并赋值为 0
18 |     const count = ref(0)
19 |     // 定义一个函数，修改 count 的值。
20 |     const countAdd = () => {
21 |       count.value++
22 |     }
23 |     // 计算属性，使用计算函数并命名，然后在 return 中导出即可
24 |     const bigCount = computed(() => {
25 |       return count.value * 10
26 |     })
27 |     // 计算多个属性，可以通过返回一个对象的方式来实现
28 |     const computeCount = computed(() => {
29 |       return {
30 |         '100x': count.value * 100,
31 |         '1000x': count.value * 1000,
32 |       }
33 |     })
34 |     // 导出一些内容给上面的模板区域使用
35 |     return {
36 |       count,
37 |       countAdd,
38 |       bigCount,
39 |       computeCount
40 |     }
41 |   }
42 | }
43 | </script>
44 | 


--------------------------------------------------------------------------------
/src/views/Dad.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Child>
 3 |     这些文字将显示在组件默认插槽内
 4 |     <template v-slot:footer>
 5 |       这里的文字会显示在组件的具名插槽内
 6 |     </template>
 7 |     <template v-slot:bottom="scope">
 8 |       文字右边会有个颜色值 >>> {{scope.color}}
 9 |     </template>
10 |     <template v-slot:object="scope">
11 |       文字右边会有多个数据 >>> 名字：{{scope.name}}，年龄：{{scope.old}}
12 |     </template>
13 |   </Child>
14 | </template>
15 | <script>
16 | import Child from '@/components/child.vue'
17 | export default {
18 |   components: { Child }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/views/Father.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     鼠标 x 轴 坐标 >>> <span class="red">{{ x }}</span> <br>
 4 |     鼠标 y 轴 坐标 >>> <span class="red">{{ y }}</span> <br>
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | // 引用我们开发的子组件
 9 | import Position from '@/components/Position.js'
10 | export default {
11 |   setup () {
12 |     // 引用函数子组件并展开它的值
13 |     const { x, y } = Position()
14 |     // 将他的值 return 出去
15 |     return { x, y }
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
 4 |     <button @click="countAdd">{{btnText}}</button>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // ref 是 vue 3.0 的一个重大变化，其作用为创建响应式的值
10 | import { ref } from 'vue'
11 | // 导出依然是个对象，不过对象中只有一个 setup 函数
12 | export default {
13 |   setup () {
14 |     // 定义一个不需要改变的数据
15 |     const btnText = '点这个按钮上面的数字会变'
16 |     // 定义一个 count 的响应式数据，并赋值为 0
17 |     const count = ref(0)
18 |     // 定义一个函数，修改 count 的值。
19 |     const countAdd = () => {
20 |       count.value++
21 |     }
22 |     // 导出一些内容给上面的模板区域使用
23 |     return {
24 |       btnText,
25 |       count,
26 |       countAdd
27 |     }
28 |   }
29 | }
30 | </script>
31 | <style lang="scss">
32 | body {
33 |   background: #f0f0f0;
34 | }
35 | .home {
36 |   line-height: 2;
37 |   .red {
38 |     color: red;
39 |   }
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/views/Life.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
 4 |     <button @click="countAdd">点击加数字</button>
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | // 你需要使用到什么生命周期，就引出来什么生命周期
 9 | import {
10 |   onBeforeMount,
11 |   onMounted,
12 |   onBeforeUpdate,
13 |   onUpdated,
14 |   onBeforeUnmount,
15 |   onUnmounted,
16 |   ref
17 | } from 'vue'
18 | 
19 | export default {
20 |   // setup 函数，就相当于 vue 2.0 中的 created
21 |   setup () {
22 |     const count = ref(0)
23 |     // 其他的生命周期都写在这里
24 |     onBeforeMount (() => {
25 |       count.value++
26 |       console.log('onBeforeMount', count.value)
27 |     })
28 |     onMounted (() => {
29 |       count.value++
30 |       console.log('onMounted', count.value)
31 |     })
32 |     // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值，会死循环的哦！
33 |     onBeforeUpdate (() => {
34 |       console.log('onBeforeUpdate', count.value)
35 |     })
36 |     onUpdated (() => {
37 |       console.log('onUpdated', count.value)
38 |     })
39 |     onBeforeUnmount (() => {
40 |       count.value++
41 |       console.log('onBeforeUnmount', count.value)
42 |     })
43 |     onUnmounted (() => {
44 |       count.value++
45 |       console.log('onUnmounted', count.value)
46 |     })
47 |     // 定义一个函数，修改 count 的值。
48 |     const countAdd = () => {
49 |       count.value++
50 |     }
51 |     return {
52 |       count,
53 |       countAdd
54 |     }
55 |   }
56 | }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/src/views/Parent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
 4 |     <!-- 使用子组件，并传一些值进去 -->
 5 |     <MyButton :type="btnType" size="medium" width="300px" @onClick="countAdd">
 6 |       点这个按钮上面的数字会变
 7 |     </MyButton>
 8 |   </div>
 9 | </template>
10 | <script>
11 | import { ref } from 'vue'
12 | // 引用我们开发的子组件
13 | import MyButton from '@/components/MyButton.vue'
14 | export default {
15 |   // 注册我们的子组件，这两步操作和 vue 2.0 一致。
16 |   components: { MyButton },
17 |   setup () {
18 |     const count = ref(0)
19 |     // 定义按钮默认 type 为 primary
20 |     const btnType = ref('primary')
21 |     const countAdd = () => {
22 |       count.value++
23 |       // 让按钮 type 在 primary 和 default 之前切换
24 |       const types = ['primary', 'default']
25 |       btnType.value = types[count.value % 2]
26 |     }
27 |     return {
28 |       count,
29 |       btnType,
30 |       countAdd
31 |     }
32 |   }
33 | }
34 | </script>
35 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const { VueLoaderPlugin } = require('vue-loader')
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 5 | 
 6 | module.exports = (env = {}) => ({
 7 |   mode: env.prod ? 'production' : 'development',
 8 |   devtool: env.prod ? 'source-map' : 'inline-source-map',
 9 |   entry: path.resolve(__dirname, './src/main.js'),
10 |   output: {
11 |     path: path.resolve(__dirname, './dist'),
12 |     publicPath: '/'
13 |   },
14 |   resolve: {
15 |     alias: {
16 |       'vue': '@vue/runtime-dom',
17 |       '@': path.resolve(__dirname, './src')
18 |     }
19 |   },
20 |   module: {
21 |     rules: [
22 |       {
23 |         test: /\.vue$/,
24 |         use: 'vue-loader'
25 |       }, {
26 |         test: /\.css$/,
27 |         use: ['style-loader', 'css-loader']
28 |       }, {
29 |         test: /\.scss$/,
30 |         use: ['style-loader', 'css-loader', 'sass-loader']
31 |       }
32 |     ]
33 |   },
34 |   plugins: [
35 |     new VueLoaderPlugin(),
36 |     new CleanWebpackPlugin(),
37 |     new HtmlWebpackPlugin({
38 |       template: path.resolve(__dirname, './public/index.html'),
39 |       filename: 'index.html'
40 |     })
41 |   ],
42 |   devServer: {
43 |     publicPath: '/',
44 |     inline: true,
45 |     hot: true,
46 |     stats: 'minimal',
47 |     contentBase: __dirname,
48 |     overlay: true,
49 |     historyApiFallback: true
50 |   }
51 | })
52 | 


--------------------------------------------------------------------------------