webpack+vue开发配置

其他 2019-02-19 21:51:19 阅读次数: 0

Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue中文文档

webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack中文文档

vue+webpack开发

  • 案例预览
    案例
  • 初始化package.json文件
 cnpm init -y
  • 安装plugin和loader（下载所有基本的包）
cnpm i webpack webpack-cli -g
cnpm i webpack webpack-cli -D
cnpm i webpack-dev-server -D
cnpm i html-webpack-plugin -D
cnpm i style-loader css-loader -D
cnpm i node-sass sass-loader -D
cnpm i less less-loader -D
cnpm file-loader url-loader -D
cnpm babel-loader@7 babel-core babel-plugin-transform-runtime -D
cnpm babel-preset-env babel-preset-stage-0 -D
  • 在package.json的"scripts"配置本地服务器
{
  "name": "02webpack_vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  }
}
  • webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')

module.exports = {
	entry:path.join(__dirname,'/src/main.js'),
	output:{
		path:path.join(__dirname,'/dist'),
		filename:'bundle.js'
	},
	plugins:[
		new htmlWebpackPlugin({
			template:path.join(__dirname,'/src/index.html'),
            filename:'index.html'
		})
	],
	module:{
		rules:[
			{test:/\.css$/,use:['style-loader','css-loader']},
			{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
			{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
			{test:/\.(png|jpeg|jpg|bmp|gif)$/,use:'url-loader?limit=2000&name=[hash:8]-[name].[ext]'},
			{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
			{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
		]
	}
}
  • 在案例根目录下新建 .babelrc（装换高级的es语法）
{
  	"presets":["env","stage-0"],
  	"plugins":["transform-runtime"]
}
  • 在src文件目录下新建main.js、index.html等进行测试,文件内容随意（名字不能随便换，否则webpack配置也需要换）
    案例
  • 运行文件
cnpm run dev
  • 如果报错可能是装包过程中出错，复制上面的package.json文件到自己的package.json,cnpm i重新装包
cnpm i
  • 测试成功，会自动打开默认浏览器，查看index.html

webpack使用vue

不建议
  1. 下载vue
cnpm i vue -S
  1. 在main.js引入
import Vue from '../node_modules/vue/dist/vue.js'
3. 如果直接导入的包功能是不完善的
```js
import Vue from 'vue'
//需要配置resolve
webpack推荐使用.vue这个组件模板定义组件，需要安装能够解析文件的loader
  1. 下载vue包
cnpm i vue -S
  1. 使用包
cnpm i vue-loader vue-template-compiler -D

vue-loader:vue-loader 是一个 webpack 的 loader，可以将.vue格式编写的 Vue 组件转换为 JavaScript 模块; 能带来一个现代，灵活并且非常强大的前端工作流程。vue-template-compiler常用来编译vue2.0的模板
3. 配置webpack.config.js

const htmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
	entry:path.join(__dirname,'/src/main.js'),
	output:{
		path:path.join(__dirname,'/dist'),
		filename:'bundle.js'
	},
	plugins:[
		new htmlWebpackPlugin({
			template:path.join(__dirname,'/src/index.html'),
            filename:'index.html'
		}),
		new VueLoaderPlugin() 
	],
	module:{
		rules:[
			{test:/\.css$/,use:['style-loader','css-loader']},
			{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
			{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
			{test:/\.(png|jpeg|jpg|bmp|gif)$/,use:'url-loader?limit=2000&name=[hash:8]-[name].[ext]'},
			{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
			{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
			{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
		]
	}
}
  1. VueLoaderPlugin
    Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用，否则会报错
    vue-loader文档
    错误
  2. 目录
    vue需要新建的文件
  3. app.vue
<template>
  <div>
    <h1>这是登录组件，使用 .vue 文件定义出来的--{{msg}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    // 注意：组件中的 data 必须是 function
    return {
      msg: "vue-loader vue-template-compiler"
    };
  },
  methods: {
    show() {
      console.log("调用了 login.vue 中的 show 方法");
    }
  }
};
</script>

<style>

</style>
  1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue的学习</title>
</head>
<body>
	<div id="app">
        <app></app>
    </div>
</body>
</html>
  1. main.js
import Vue from 'vue'
import app from './app.vue'
var vm = new Vue({
    el:"#app",
    data:{
        msg:'用runtime-only，渲染不出来。使用vue-loader'
    },
    methods:{
        
    },
    render: c => c(app)//渲染app.vue
    // render:function(creatElements){
    //     creatElements(login)
    // }
})
  1. cnpm run dev
    浏览器自动打开
  2. 使用路由
cnpm i vue-router -S

在main.js引入（当然在开发中应该是抽离路由模块的）

import VueRouter from 'vue-router'

基本配置

  1. 复制package.json
{
  "name": "02webpack_vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.6.2",
    "vue-template-compiler": "^2.6.6",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "vue": "^2.6.6",
    "vue-router": "^3.0.2"
  }
}
  1. 下载包
cnpm i
  1. webpack.confg.js的配置
const htmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
	entry:path.join(__dirname,'/src/main.js'),
	output:{
		path:path.join(__dirname,'/dist'),
		filename:'bundle.js'
	},
	plugins:[
		new htmlWebpackPlugin({
			template:path.join(__dirname,'/src/index.html'),
            filename:'index.html'
		}),
		new VueLoaderPlugin() 
	],
	module:{
		rules:[
			{test:/\.css$/,use:['style-loader','css-loader']},
			{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
			{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
			{test:/\.(png|jpeg|jpg|bmp|gif)$/,use:'url-loader?limit=2000&name=[hash:8]-[name].[ext]'},
			{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
			{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
			{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
		]
	}
}
  1. .babelrc是一个json文件
{
  	"presets":["env","stage-0"],
  	"plugins":["transform-runtime"]
}

猜你喜欢

转载自blog.csdn.net/weixin_41105030/article/details/87167887
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022