vue+webpack项目工程配置

发布时间：2020-12-16 23:10:24 所属栏目：百科来源：网络整理

导读：vue+webpack项目工程配置 1、npm init? 生成package.json（选项一路默认） ? 2、npm i webpack vue vue-loader ? ? ? 提示需要安装css-loader和vue-template-compiler依赖 ? 3、安装依赖 cnpm i css-loader vue-template-compiler ? 4、新建文件夹src，创建

vue+webpack项目工程配置

1、npm init?

生成package.json（选项一路默认）

2、npm i webpack vue vue-loader

提示需要安装css-loader和vue-template-compiler依赖

3、安装依赖

cnpm i css-loader vue-template-compiler

4、新建文件夹src，创建文件app.vue

<template>
    div class="text">{{text}}</div>
>

script>
export default {
    data(){
        return{
            text:'abc
        }
    }
}
style scoped
    .text{
        color:red;
    }
style>

5、创建webpack.config.js （帮助打包前端资源）

// 打包前端资源
const path=require('path')

module.exports={
    entry:path.join(__dirname,'src/index.js'),output:{
        filename:'boundle.js',path:path.join(__dirname,'dist')
    },module:{
        rules:[
            {
                test:/.vue$/
            }
        ]
    }
}

6、在src目录中创建index.js （入口文件）

 入口文件
import Vue from 'vue'
import App from './app.vue'

const root=document.createElement("div")
document.body.appendChild(root)

new Vue({
    render:(h)=>h(App)
}).$mount(root)

7、在package.json中的scripts里添加一句：

?8、npm run build

由于版本升级，出现报错提示

9、修改webpack.config.js

 打包前端资源
const path = require('path')
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  entry: path.join(__dirname,"src/index.js""vue-loader""css-loader" 请确保引入这个插件！
     VueLoaderPlugin(),],};

10、可以看到生成了dist目录，包含boundle.js文件

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!