Vue 小白再小白

·  阅读 208

前言

如果一开始就用vue-cli来跑一个vue项目,那么具体.vue文件为什么可以在浏览器中正常的运行起来可能不是很清楚,下面将会一步一步的介绍一个.vue文件怎么在浏览器中运行起来。

项目结构

搭建步骤

首先创建一个webpack.config.js,里面的配置内容主要是

将入口文件index.js编译到dist下的bundle.js

对.vue文件预编译和es6转es5的预编译支持

const path = require('path');
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {    
    entry:'./index.js',    
    output:{        
        filename:'bundle.js',        
        path:__dirname+'/dist'    
    },    
    module: {        
        rules: [            
           {                
            test: /\.js$/,                
            loader: 'babel-loader'           
           },            
           {                
            test: /\.vue$/,               
            loader: 'vue-loader',            
            }        
        ]    
    },    
    plugins:[        
        new VueLoaderPlugin()    
    ]
};​
复制代码

这个时候你的开发环境需要安装的依赖包为

npm i babel-loader babel-core vue-loader vue-template-compiler webpack -D
复制代码

注意:这样默认安装的babel-loader为最新的版本@8,会报错的,需要指定安装

npm i babel-loader@7 -D
复制代码

单文件组件命名为App.vue,创建一个App.vue

<template>    
    <div>        
        <h1>Hello</h1>    
    </div>
</template>
<script>
export default {  
    name: "app"
};
</script>
<style>
</style>
复制代码

接着创建index.js,该文件是入口文件,里面引入vue和App.vue,如果没有安装vue,请

npm i vue -S


import Vue from 'vue';
import App from './App.vue';
new Vue({    el:'#app',    render:h=>h(App),    });
复制代码

然后执行webpack命令,则会在项目目录下生成一个dist文件夹,里面生成了一个bundle.js

webpack index.js
复制代码

最后创建一个index.html,里面引入编译生成的bundle.js,通过在浏览器中运行index.html看看运行效果,是否将App.vue中的内容正常渲染:

<!DOCTYPE html>
<html lang="en">
    <head>    
        <meta charset="UTF-8">    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">    
        <meta http-equiv="X-UA-Compatible" content="ie=edge">    
        <title>Vue单文件测试</title>
    </head>
<body>    
    <div id="app"></div>    
    <script src="./dist/bundle.js"></script>
</body>
</html>
复制代码
分类:
前端
标签: