基于webpack的vue开发环境搭建

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.新建并初始化项目（npm int -y）,安装webpack，webpack-cli webpack-dev-server

  安装eslint，eslint-plugin-vue，配置eslint语法检测文件.eslintrc.js

2.安装vue:

npm i vue --save

3.dist下建立index.html

<!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>Document</title>
    <script src="build.js"></script>
</head>
<body>
</body>
</html>

4.src目录下新建两个文件

util.js

module.exports = function say() {
    console.log('hello world');
}

main.js

 

var say = require('./util');
say();

5.新建webpack.config.js

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
    output: {
        filename: 'build.js' // 打包后的文件名
    },
    devServer: {
        contentBase:path.resolve(__dirname,"dist"),
        historyApiFallback: true,
        overlay: true
    }
};

6.修改package.josn

 

"scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  },

7.执行npm run dev可以调试，热更新打开，但是不会生成目标js

发布前执行npm run build,生成目标js发布

8.引入vue

main.js

 

import Vue from 'vue';
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

9.

index.html

 注意script的位置，一定要在div#app后面，否则打包时会提示找不到id为app的元素

<!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>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script src="build.js"></script>
</body>
　　/*script也可以放这里*/
</html>

10.修改webpack.config.js文件

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
    output: {
        filename: 'build.js' // 打包后的文件名
    },
    devServer: {
        contentBase:path.resolve(__dirname,"dist"),
        historyApiFallback: true,
        overlay: true
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};

'vue$': 'vue/dist/vue.esm.js'这一句给vue起一个别名，否则引入vue需要这样写：

    import Vue from 'vue/dist/vue.esm.js';

11.支持css

安装css-loader vue-style-loader

配置loader，匹配后缀名为css的文件,然后分别用css-loader，vue-style-loader去解析
解析器的执行顺序是从下往上(先css-loader再vue-style-loader)

注意：因为我们这里用vue开发，所以使用vue-style-loader，其他情况使用style-loader

css-loader使得我们可以用模块化的写法引入css,vue-style-loader会将引入的css插入到html页面里的style标签里

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            }
        ]
    }

我们现在来试下
在src目录下新建style目录，style目录里新建common.css

body {
    background: #fed;
}

main.js

import './style/common.css';

发现css样式有用了

12.引入图片资源

 安装图片加载器

  npm i file-loader --save-dev

webpack.config.js添加一个loader：

 

{
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[ext]?[hash]'
                }
            }

所有图片文件打包后放在目标文件夹的img目录下，加入图片是a.png，会生成类似：

a.png?a548e59f576077ea5f6a1ab3b9df1cd7"

方便更新时取消缓存

 

  main.js

import Vue from 'vue';
import "./style/common.css"
Vue.component('my-component', {
  template: '<img :src="url" />',
  data() {
    return {
      url: require('./img/icon_bindap.png')
    }
  }
})
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

index.html

<!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>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
        <my-component/>
    </div>
</body>
<script src="build.js"></script>
</html>

 上面例子中是把vue放入到js中，使用 Vue.component 来定义全局组件
  在实际项目里，更推荐使用单文件组件，把组件放到一个单独的.vue文件中，参考：

https://www.cnblogs.com/cowboybusy/p/10608654.html

以上是 基于webpack的vue开发环境搭建 的全部内容， 来源链接： utcz.com/z/378804.html

回到顶部