vue+webpack 项目示例（第一部分）

最新推荐文章于 2025-06-09 22:52:22 发布

原创最新推荐文章于 2025-06-09 22:52:22 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webpack #实例 #项目 #配置

vue 专栏收录该内容

22 篇文章

订阅专栏

项目没有使用vue-cli创建目录，自己搭建，我们先学会如何创建整个项目；

1.先随便找个地方创建一个文件夹，起个名字吧：vue-webpack ;

使用npm init 先创建一个packge.json ;

2. 局部安装webpack（注意，请使用webpack3.0版本，不要用最新的4.0版本），vue ，vue-loader;

3.第二步的时候出现了warn 警告信息，那么来处理一下，

因为缺少一些东西，所以下载一下css-loader和vue-template-compiler；

4.在项目目录下新建src文件夹，在src中新建 app.vue ,app.vue中写入内容：

<template>
    <div id="myapp">{{myapp}}</div>
</template>

<script>
export default {
       data(){
           return{
               myapp:"这是我的第一个vue项目示例"
           }
       }
}
</script>

<style>
    #myapp{font-size:30px; color:green;}
</style>

5.上面的项目是没法直接运行的，我们继续在项目目录vue-webpack下创建：webpack.config.js文件

const path=require("path");
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"
                 }
             ]
         }
}

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 文件：增加 “build”：“webpack。。。。省略”（如下）

{
  "name": "vue-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "\u001b[A\u001b[B",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --config webpack.config.js"   
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.28.11",
    "vue": "^2.5.16",
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^3.0.0"
  }
}

8.全部完成之后目录结构如下：

9.我们使用命令： npm run build 即可；（注意，下载webpack的时候注意版本，4.0版本的webpack-cli已经分离出去

，我们这里使用3.0.0版本）

10.命令执行之后，目录多出来一个dist 文件夹，里面还有我们的目标文件 bundle.js

11,接下来我们测试运行一下就可以了，

测试步骤：在dist文件夹下创建index.html文件，引入我们的bundle.js文件：

<!doctype html>
<html>
    <head>
        <meta>
        <title>this is test file</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>