vue2+webpack4搭建一个项目

生成了package.json文件之后，安装webpack，vue，loader等相关的包：

npm install webpack --save-dev //安装webpack
npm install --save-dev webpack-cli //4以后需要
npm i vue -S
npm i vue-loader vue-template-compiler -D
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
npm i babel-plugin-transform-vue-jsx
npm install  babel-plugin-syntax-jsx  babel-helper-vue-jsx-merge-props --save-dev
npm install css-loader style-loader --save-dev
npm install --save-dev  postcss-loader autoprefixer postcss
npm install stylus-loader stylus --save-dev
npm install html-webpack-plugin --save-dev
npm install file-loader --save-dev
npm install url-loader --save-dev

新建一个vue组件：

<template>
	<div id='a'>{{text}}
		<div>是的归属感热交头接耳家庭人均</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			text:"收到回复"
		}
	},
}
</script>

<style>
	#a{
		color:red;
		text-align: right;
		height: 200px;
		width: 200px;
		background-image: url('../../assets/cb4410c6637e44cd98710355e2754aec.jpeg');
		float:right;
	}
</style>

在根目录下新建一个webpack.config.js文件:

const path=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
//const webpack=require('webpack');
const { VueLoaderPlugin } = require('vue-loader');

const config = {
	entry: path.resolve(__dirname,'src/index.js'),
	output: {
		filename: 'js/[name].js',
		path: path.resolve(__dirname,'dist')
	},
	module:{
		rules:[
			{test: /.vue$/,use:'vue-loader'},
			{test: /\.js$/,loader: 'babel-loader'	},
			{test: /\.css$/,loader: "style-loader!css-loader"},
			{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'},
			{ 
				test: /\.(png|jpg|jpeg|gif|svg)$/i, 
				loader: 'url-loader',
					options: {
						limit: 1024, //如果文件小于字节限制，则可以返回DataURL,否则返回data:'xxx....'格式
						name:'img/[hash:5].[ext]',//指定打包后的相对路径和名称
					}
			},
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template:'index.html',//位置根目录
	  }),
		new VueLoaderPlugin(),//"vue-loader": "^15.7.0", 之后请确保引入这个插件！
	],
	devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
		port:8000,
		host:'0.0.0.0',//方便手机访问本机ip
		overlay:{//把错误呈现在网页上
			errors:true
		}
  }
};
module.exports=config;

在入口文件index.js中将vue组件挂载到dom节点上：

import Vue from 'vue' //引用类库
import App from './components/app.vue'
import '../style/stylus.styl'

const root=document.createElement('div');//创建一个节点
document.body.appendChild(root);

new Vue({ //实例化一个vue对象
   render: h=>h(App)
}).$mount(root)//挂载

webpack-dev-server的使用 

安装：

npm install webpack-dev-server --save-dev //提供实时重新加载的开发服务器一起使用,仅用于开发。

在package.json中自定义脚本

"scripts": {
  "start:dev": "webpack-dev-server"
}

在webpack配置文件中加入devServer配置：

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
		port:8000,
		host:'0.0.0.0',//方便手机访问本机ip
		overlay:{//把错误呈现在网页上
			errors:true
		},
		//open:true,//自动打开浏览器
		hot: true,//热模块替换功能，只改变内容，不刷新页面
	},

在plugins中加入：

	plugins: [
	   ...
		new webpack.HotModuleReplacementPlugin(),///热模块替换
		new webpack.NoEmitOnErrorsPlugin(),//减少不必要的代码显示
	],

执行命令：npm run start:dev

vue2核心知识介绍

• 数据绑定
• vue文件开发方式
• render方法

API重点：

• 生命周期方法
• computed

配置vue的jsx写法以及postcss

在根目录新建文件postcss.config.js

const autoprefixer=require('autoprefixer');

module.exports={
  plugins:[
    autoprefixer()
  ]
}

在根目录新建文件.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["transform-vue-jsx"]
}

在webpack.config.js文件中修改配置：

		{
				test: /\.styl$/,
				use: [
					'style-loader',
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
			        sourceMap:true,
						}
					},
					'stylus-loader'
				]
			},