您的位置：首页 > Web前端 > Vue.js

使用Webpack如何创建一个Vue项目（详解~）

2020-06-06 07:04 197 查看

webpack 集成vue

1.创建一个文件夹例：webpack_vue

2.创建一个package.json文件
指令：npm init -y
内容例：

{
"name": "webpack_vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "webpack",
"dev": "webpack-dev-server"
}
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.5.3",
"html-webpack-plugin": "^4.3.0",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"vue-loader": "^15.9.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"file-loader": "^6.0.0",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuex": "^3.3.0"
}
}

打开文件scripts修改为：

"scripts": {
"test": "webpack",
"dev": "webpack-dev-server"
},

3.安装webpack,webpack-cli
指令：npm install webpack webpack-cli --save-dev
简写：npm i webpack webpack-cli -D

4.必须要创建webpack配置文件，来执行
默认webpack配置文件：webpack.config.js
内容例：

const path = require('path');

//引入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

const config = {
//指定模式：production--生产环境   development--开发环境
mode: 'development',

//项目入口文件
/**   多入口形式
* {
"index": './src/index.js',
"main": './src/main.js'
},
*/

entry: './src/main.js',  //单入口形式

//项目出口文件
output: {
//设置项目的输出目录
path: path.resolve(__dirname, "dist"),
//输出的文件名
filename: 'bundle.js'  // 'bundle.js'--单入口方式   '[name]_[hash:8].js'--多入口方式 可以加入hash值
},

//webpack识别资源文件的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(jpg|jpeg|png|gif)$/, use: ['url-loader'] },
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{ test: /\.vue$/, loader: "vue-loader" },
]
},

plugins: [
//文件清理插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// title:'我是构建w好的html页面'
template: './index.html',  //读取模板的入口文件
filename: 'index.html'  //生成打包后的html文件
}),
new VueLoaderPlugin()
],

//启服务器环境
devServer: {
//配置端口号
port: 9999,

//配置热更新
hot: true,

//服务器在内存中监听项目目录
contentBase: path.join(__dirname, 'dist'),
}
}
module.exports = config

5.安装ES6的包：babel
① 指令：npm install --save-dev babel-loader @babel/core @babel/preset-env

② webpack.config.js中配置
{ test: /.js$/, exclude: /node_modules/, loader: “babel-loader” },

6.在webpack_vue文件夹下新建.babelrc文件
内容例：

{
"presets": ["@babel/preset-env"]
}

7.在webpack_vue目录下新建文件index.html文件
内容例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

8.在webpack_vue文件夹下新建src目录

9.src文件夹下新建App.vue文件
内容例：

<template>
<div id="app">
<router-view/>
</div>
</template>

<script>
export default {
name: 'App'
}
</script>

<style>
</style>

10.src文件夹下新建main.js文件
内容为console.log(‘test’)

11.再执行命令 npm i

12.执行 npm run dev 正确在后台中打印出 test ，且不报错

13.执行 npm i vue -S

14.在main.js中添加内容

import Vue from 'vue'
import App from './App.vue'

new Vue({
el: '#app',
data：{
}，
render: (h) => h(App)
})

15.在App.vue中输入内容测试，执行npm run dev测试，控制台无错误

16.路由、vuex的配置与之前在vue中的配置方式相同

指令：
路由：npm i vue-router -S
vuex：npm i vuex -S

到这呢Webpack集成Vue基本完成，现在我们就可以去疯狂敲代码啦~

动次打次动次打次 ~~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

使用Webpack如何创建一个Vue项目（详解~）

webpack 集成vue

到这呢Webpack集成Vue基本完成，现在我们就可以去疯狂敲代码啦~

动次打次 动次打次 ~~

动次打次动次打次 ~~