webpack learn1-初始化项目1

使用Visual  Studio Code软件使用准备,先安装一些插件,加快开发效率(还有Language Packs 选择简体中文安装后重启软件,可切换为中文):

下面是项目初始化步骤:

1 软件打开终端:在指定目录输入

npm init

2 再输入 

npm i webpack vue vue-loader

3 然后根据提醒warn安装需要的依赖(比如css-loader和vue-template-compiler)

npm i css-loader vue-template-compiler

 4 建立文件夹src放源码,在src下建立app.vue文件

在app.vue中输入:

复制代码
<template>
    <div id="test">{{text}}</div>
</template>

<script>
export default {
    data() {
        return {
            text: 'abc'
        }
    }
}
</script>

<style>
#test {
    color: red;
}
</style>
复制代码

在项目目录下建立webpack.config.js文件,内容:)

 

复制代码
const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: path.join(__dirname,'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname,'dist')
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },{
        test:/.css$/,
        loader: ['css-loader']
      }
    ]
  },
  plugins:[
      new VueLoaderPlugin()
  ]
}
复制代码

 

在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)
复制代码

在package.json文件中script中增加一行代码: "build": "webpack --config webpack.config.js --mode development"

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js --mode development"
  }

5 然后在终端输入npm run build

出现错误还有可能需要安装vue-template-compiler

posted @   study_php_java_C++  阅读(196)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示