项目搭建完成后需要分别对 main.js, index.html, App.vue 文件进行编写代码

1 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.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.     <script>Vue.config.productionTip = false</script>
  9.     <title>Vue-demo</title>
  10. </head>
  11. <body>
  12.     <div id="app">
  13.         <App></App>
  14.     </div>
  16.     <script>
  17.         var vm = new Vue({
  18.             el: "#app",
  19.             data: {},
  20.             methods: {},
  21.         });
  22.     </script>
  23.       <!-- 引入打包后的index.js文件。该文件的名字不是固定名字，可以在webpack.config.js的出口文件中指定 -->
  24.     <script src='./index.js'></script>
  25. </body>
  26. </html>

2 main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  4. new Vue({
  5.     el: '#app',
  6.     // 渲染单文件组件
  7.     render: function(create){
  8.         return create(App)
  9.     }
  10. })

3 App.vue

  1. <template>
  2.     <div>单文件组件 {{name}}</div>
  3. </template>
  5. <script>
  6. export default {
  7.     data:function(){
  8.         return {name: 'python'}
  9.     }
  10. }
  11. </script>
  13. <style>
  14.     div{background-color: green;}
  15. </style>

4 项目调试运行

每次我们需要看到组件效果需要手动生成一个index.js文件，这是我们可以借助webpack-dev-server自动运行我们的代码
在项目目录下，执行下面指令可以开启前端服务，自动运行前端代码

./node_modules/.bin/webpack-dev-server

image.png
image.png