webpack7-Vue

最新推荐文章于 2021-07-12 11:31:00 发布

Leisure Tea

最新推荐文章于 2021-07-12 11:31:00 发布

阅读量245

点赞数

分类专栏： webpack Vue 文章标签： webpack vue

本文链接：https://blog.csdn.net/SevenSongyun/article/details/103805058

版权

Vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

webpack

11 篇文章 0 订阅

订阅专栏

webpack7-Vue

一.npm初始化

npm init -y

二.安装

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm i jquery -S

三.安装Vue

npm i vue -S

四.导入Vue

4.1 方式1：在入口js文件中 import Vue from “vue/dist/vue.js”
4.2 方式2：
第一步：在入口js文件中 import vue from ‘vue’
第二步：在配置文件 webpack.config.js 中添加

resolve: {
    alias: {
        "vue$": "vue/dist/vue.js"
    }
}

五.步骤

npm初始化
```
npm init -y
```

安装

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm i jquery -S

安装Vue
```
npm i vue -S
```
在package.json中添加
```
"dev": "webpack-dev-server"
```

编写配置文件webpack.config.js

const path = require("path")
const webpack = require("webpack")
const htmlwebpackplugin = require("html-webpack-plugin")

module.exports = {
    entry: path.join(__dirname, "./src/index.js"),
    output: {
        path: path.join(__dirname, "./src/dist"),
        filename: "index.js"
    },
    mode: "development",
    devServer: {
        open: true,
        port: 3000,
        contentBase: "src",
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlwebpackplugin({
            template: "./src/index.html",
            filename: "index.html"
        })
    ]
}

在js入口文件中导入vue
6.1 方式1：

import Vue from "vue/dist/vue.js"

6.2 方式2：

import Vue from "vue"

在配置文件webpack.config.js中添加

resolve: {
    alias: {
        "vue$": "vue/dist/vue.js"
    }
}

编写入口文件index.js

// 本例使用方式1导入Vue
import Vue from "vue/dist/vue.js"

var vm = new Vue({
    el: "#app",
    data: {
        name: "Seven"
    },
    methods: {}
})

编写html文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{name}}</h1>
</div>
</body>
</html>

运行
```
npm run dev
```

更新时间：2020-1-2

Leisure Tea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webpack7-Vue

webpack7-Vue一.npm初始化npm init -y二.安装npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -Dnpm i jquery -S三.安装Vuenpm i vue -S四.导入Vue4.1 方式1：在入口js文件中 import Vue from “vue/dist/vue...
复制链接

扫一扫

专栏目录