使用webpack+vue从零开始打造前端项目

最新推荐文章于 2023-03-19 08:46:36 发布

拾 -.-

最新推荐文章于 2023-03-19 08:46:36 发布

阅读量318

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/zk86547462/article/details/108142141

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一.项目初始化

1.创建项目，初始化项目

npm init -y

2.安装webpack

npm install webpack webpack-cli -D

install :安装
-D :安装开发环境依赖，是 -save-dev的缩写

在这里插入图片描述

二.编写项目入目

1.在根目录下编写index文件，作为项目主页文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>从零打造一个tudo应用</title>
	</head>
	<body>
		<div id="app">
			
		</div>
	</body>
</html>

2.编写vue根实例
创建src目录，在src目录下创建main.js作为程序主入口文件
在这里插入图片描述
安装vue

npm install vue

在这里插入图片描述
挂载App组件
编写App.vue文件

挂载app实例在man.js

//1.创建Vue根实例
import Vue from 'vue'


//导入app组件
import App from './App.vue'

new Vue({
	el:'#app',
	components:{
		//组件名，组件对象
		App:App
	},
	template:'<App/>'
})

```三.webpack基本配置

1.创建webpackconfig文件

在根目录编写webpack.config.js

//引入模块
const path = require('path');
module.exports = {
        //打包文件是否为压缩格式
        mode: "production",
    entry: {
        //打包文件的入口
        main: './src/main.js',
    }
    output: {
        //打包生成文件的名字
        filename: 'bundle.js',
        //打包生成文件的绝对路径
        path: path.resolve(__dirname, 'dist')
    }
}

在这里插入图片描述

2.编写webpack脚本

在pagejson中，创建脚本
在这里插入图片描述

这样就可以通过 npm run build来执行webpack打包了

四。使用Vue-loder打包vue文件

1.安装vue-loder

官网：vue-loder
安装

npm install -D vue-loader vue-template-compiler

2.安装css-loader

npm install -D css-loader

3.配置webconfig脚本

//引入模块
const path = require('path');
// 引入'vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
        //打包文件是否为压缩格式,开发development
    mode: "production",
    entry: {
        //打包文件的入口
        main: './src/main.js',
    },
    output: {
        //打包生成文件的名字
        filename: 'bundle.js',
        //打包生成文件的绝对路径
        path: path.resolve(__dirname, 'dist')
    },
	//打包规则
	module: {
	    rules: [
	      {
	        test: /\.vue$/,
	        loader: 'vue-loader'
	      }
	    ]
	  },
	  plugins: [
	    // 请确保引入这个插件来施展魔法
	    new VueLoaderPlugin()
	  ],
	  //添加别名配置
	  resolve:{
		  alias:{
			  'vue':'vue/dist/vue.js'
		  }
	  }
}

五.测试

1.打包

npm run build

在这里插入图片描述

2.index测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>从零打造一个tudo应用</title>
	</head>
	<body>
		<div id="app">
		
		</div>
		<script src="dist/bundle.js"></script>
	</body>
</html>

在这里插入图片描述

拾 -.-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用webpack+vue从零开始打造前端项目

一.项目初始化1.创建项目，初始化项目npm init -y2.安装webpacknpm install webpack webpack-cli -Dinstall :安装-D :安装开发环境依赖，是 -save-dev的缩写二.编写项目入目1.在根目录下编写index文件，作为项目主页文件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>从
复制链接

扫一扫

专栏目录