vue单文件组件

小小追星人

已于 2022-03-19 02:38:13 修改

阅读量885

点赞数

分类专栏： webpack 文章标签：前端框架

于 2022-03-19 02:25:47 首次发布

本文链接：https://blog.csdn.net/fingerartist/article/details/123588001

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue单文件组件----vue-loader----webpack(前端资源模块化加载器和打包工具（手动搭建）

1.创建项目，目录结构

目录结构注：package.json 可以使用npm init --yes初始化

2.安装相关模板

合并：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler

3.编写

在这里插入图片描述 ## 3.1编写main.js
![第五行不可以省略‘./’]

/**
 * 使用ES6语法引入模板
 */
import Vue from 'vue'
import App from './App.vue'

new Vue({
	el:'#app',
	render:function(h){ //使用render函数渲染组件
		return h(App);
	}
});

3.2编写webpack.config.js

module.exports={
	//配置入口文件
	entry:'./main.js',
	//配置入口文件输出位置
	output:{
		path:__dirname, //项目根路径
		filename:'build.js'
	},
	//配置模块加载器
	module:{
		rules:[
			{
				test:/\.vue$/, //所有以.vue结尾的文件都由vue-loader加载
				loader:'vue-loader'
			},
			{
				test:/\.js$/, //所有以.js结尾的文件都由babel-loader加载，除了node_modules以外
				loader:'babel-loader',
				exclude:/node_modules/
			}
		]
	}
}

<script src="build.js"></script>手动引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script src="build.js"></script>
</body>
</html>

3.3编写.babelrc

{
	"presets":[
		["env",{"module":false}]
	]
}

3.4编写package.json

![脚本名称+启动一个服务器+open（打开浏览器）+热加载+指定端口8800（可自定义）]

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev":"webpack-dev-server --open --hot --port 8800"  **//编辑此行**
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.3.4"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.5.2",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  }
}

3.5运行测试

npm run dev
在这里插入图片描述
4、遇到的报错:解决方式：
npm i --registry=https://mirrors.huaweicloud.com/repository/npm/
npm run dev
是网络原因，使用华为网络就可以了

5.浏览器页面

小小追星人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue单文件组件

vue单文件组件----vue-loader----webpack(前端资源模块化加载器和打包工具（手动搭建）1.创建项目，目录结构注：package.json 可以使用npm init --yes初始化2.安装相关模板3.编写## 3.1编写main.js## 3.2编写webpack.config.js<script src="build.js"></script>手动引入## 3.3编写.babelrc## 3.4编写package.json## 3.5运
复制链接

扫一扫