1.yarn安装方法：
> yarn 的安装方法：npm i -g yarn
> yarn config set registry https://registry.npm.taobao.org -g
> yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
2.创建vue项目
mkdir project-vue
cd project-vue
yarn init -y
yarn add -D webpack webpack-cli
创建webpack.config.js
创建src/index.js
console.log("hello")
yarn add vue //把vue引入进来
yarn add -D html-webpack-plugin
3.webpack.config.js
const HtmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
mode:"development",
entry:"./src/index.js",
plugins:[new HtmlWebpackPlugin({
template:"./src/index.html",
title:"我是vue"
})]
}
4.创建src/index.html
html:5>Enter
<body>
<div id="app"></div>
</body>
5.npx webpack运行，dist/index.html浏览器运行一下
6.yarn add -D webpack-dev-server
package.json
"scripts": {
"dev":"webpack-dev-server --config webpack.config.js --open",//--open自动打开网页
"build":"webpack --config webpack.config.js"
}
yarn dev运行
7.src/index.js
import Vue from "vue";
import App from "./App.vue";
new Vue({
el:"#app",
render:(h)=>h(App)
})
src/App.vue
<template>
<h1>Hello Vue</h1>
</template>
<script>
export default {
}
</script>
8.yarn add -D vue-loader //参考文档 https://vue-loader.vuejs.org/zh/guide/#vue-cli
webpack.config.js
const VueLoaderPlugin=require('vue-loader/lib/plugin');
...
plugins:[
new VueLoaderPlugin(), //
new HtmlWebpackPlugin({
template:"./src/index.html"
})],
module:{
rules:[{
test:/\.vue$/,use:["vue-loader"]
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}]
}
...
并安装相应的模块：
yarn add -D babel-loader
yarn add -D @babel/core
yarn add -D css-loader
yarn add -D vue-template-compiler
//如果要使用less
yarn add -D less less-loader
对应的module的rules里添加
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
}
使用：
<style lang="less">
@color:blue;
.container{
.title{
background: @color;
}
}
可以抽取公共样式，然后用@import "./style/common.less";导入
最后可以把webpack.config.js复制一份名为webpack.config.prod.js
然后mode:"production",原来的mode:"development"
然后在package.json里面对应的改：
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js --open",
"build": "webpack --config webpack.config.prod.js"
}
