Vue单文件组件的使用

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

index.html

    
    
    
    Document


    


    
    

main.js

// 引入vue和App组件
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app',
    // 渲染App组件中的内容，返回给index.html文件使用
    render:function(creater){
        return creater(App)
    }
})

App.vue

    
    
单文件组件




    // 指定js内容
// export default {

// }



/* 指定css内容 */

项目打包

文件编写完成后并不能直接运行index.html产生效果，需要对项目进行打包生成一个渲染后的index.js文件进行使用

npm run build

打包后会在当前目录下生成一个index.js 文件，在index.html中引用该文件，运行index.html文件看到效果

项目调试运行

每次我们需要看到组件效果需要手动生成一个index.js文件，这是我们可以借助webpack-dev-server自动运行我们的代码   【用下面的服务来调试代码】

// 在项目目录下，执行下面指令可以开启前端服务，自动运行前端代码
./node_modules/.bin/webpack-dev-server