使用vue-loader 开发component环境搭建

最新推荐文章于 2025-07-09 09:21:45 发布

winnerxxyy

最新推荐文章于 2025-07-09 09:21:45 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/zengweibo123/article/details/78310827

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文档详细介绍了如何使用vue-loader搭建一个Vue组件开发环境。首先创建vue-demo项目，通过npm初始化，接着创建入口文件main.js、App.vue、index.html以及webpack配置文件webpack.config.js。然后在webpack配置中引入必要的依赖，并在package.json中添加脚本。最后，引入Vue及相关模块，采用ES6语法编写main.js和App.vue的代码。

1. 新建文件夹 vue-demo, 运行 npm init --yes.

2.建立如下文件

- main.js 入口文件

- App.vue vue 文件

- index.html

- webpack.config.js

webpack.config.js 内容如下

module.exports = {
    //入口文件
    entry:'./main.js', 

    //出口
    output:{
        path:__dirname,
        filename:'build.js' //打包之后的文件,html模板中引入此文件
    },
};

3.引入webpack

npm install webpack --save -dev
npm install webpack-dev-server --save -dev

修改package.json 文件，添加scripts

"scripts": {
    "dev": "webpack-dev-server --inline --hot",

}

4.引入vue相关module

npm install vue vue-template-compiler --save -dev

npm install vue-loader vue-html-loader css-loader style-loader file-loader   --save -dev

5.引入ES6模块

npm install babel-cli babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save -dev

在根目录下新建 .babelrc 文件

{
    "presets":["es2015"]
}

6.编写代码

main.js

//引入Vue
import Vue from 'vue';

//引入组件
import App from './App.vue';

//实例化Vue
new Vue({
    el:'body',
    components:{
        app:App
    }
});

App.vue

<template>
    <h1>welcom vue</h1>
</template>