（一）vue-cli的工作原理
本质是一个下载器，官方叫做启动器，帮助我们快速建立一个基本项目，根据你的选择建立起一个基本的框架。
最重要的是各种loader，浏览器不认识Vue，各种各样的loader将webpack不认识的文件转成认识的文件，比如js
plugin: 插件，扩展功能
主要是webpack，webpack熟练的话就可以自己搭建一个vue-cli
（二）使用webpack搭建vue-cli
（1）新建文件夹 初始化
npm init -y（2）安装webpack、webpack-cli
npm i webpack webpack-cli --save（3）创建index.html，在根目录下
创建一个div，id 是 app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-cli</title>
</head>
<body>
<div id="app"></div>
</body>
</html>（4）根目录下创建 main.js
main.js 主要做两件事
1）创建vue根实例
需要下载vue
npm i vue --save2）挂载App组件
代码：
// 创建vue根实例
import Vue from 'vue'
// 引入App组件
import App from './App.vue'
new Vue({
el: '#app',
components: {
App
},
template: '<App/>' // 挂载App组件
})
（5）webapck配置（webpack.config.js）
下载的插件：vue-loader、vue-template-compiler（模板编译）、css-loader、babel-loader、@babel/core、file-loader、vue-style-loader、url-loader、style-loader、sass-loader、node-sass、html-webpack-plugin、clean-webpack-plugin、postcss-loader、autoprefixer、webpack-dev-server、webpack-merge、@babel/preset-env
备注:
1）安装 vue-template-compiler 的时候，会提示手动需要安装下css-loader
2）postcss-loader：自动加浏览器样式前缀，要写在 css-loader的后面，先加前缀，在解析css
3）source-map 的作用：建立打包后的文件与源代码所在行的映射
代码：
App.vue
<template>
<div>
<div class="title">this is app</div>
</div>
</template>
<script>
import logo from './src/assets/img/logo.png'
import './index.css'
export default {
created () {
console.log(logo)
const result = [1, 2].map((item) => {
return item + 1
})
console.log(result)
}
}
</script>
<style scoped lang="scss">
.title {
color: red;
}
</style>index.css:
div {
border: 1px solid red;
transform: translate(50%);
}index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-cli</title>
</head>
<body>
<div id="app"></div>
</body>
</html>index.js:
// 创建vue根实例
import Vue from 'vue'
// 引入App组件
import App from './App.vue'
new Vue({
el: '#app',
components: {
App
},
template: '<App/>' // 挂载App组件
})
webpack.config.js:
const path = require('path')
const vueLoaderPlugin = require('vue-loader/lib/plugin') // 这个路径下的插件
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
devtool: 'source-map', // source-map
mode: 'development',
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.js$/,
loader: 'babel-loader', // 它会应用到普通的 `.js` 文件
// 以及 `.vue` 文件中的 `<script>` 块
exclude: /node_modules/
}, {
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
// 开启 CSS Modules
modules: true
}
},
'postcss-loader'
] // 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
}, {
test: /\.(png|gif|jpg|jpeg|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'image'
}
}]
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}]
},
plugins: [
new vueLoaderPlugin(),
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin() // 热更新
],
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
devServer: {
contentBase: './dist',
open: true,
port: 8080,
compress: true,
hot: true // 开启热模块更新
}
}postcss.config.js:
module.exports = {
plugins: [
require('autoprefixer')
]
}.babelrc:
{
"presets": [
[
"@babel/preset-env"
]
]
}
package.json:
{
"name": "vue-CLI",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.12.3",
"babel-loader": "^8.1.0",
"css-loader": "^5.0.0",
"file-loader": "^6.1.1",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.4",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.2.0",
"webpack-cli": "^4.1.0"
},
"devDependencies": {
"autoprefixer": "^8.0.0",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.5.0",
"postcss-loader": "^4.0.4",
"webpack-dev-server": "^2.11.5"
}
}
还有区分环境打包，分成两个文件（webpack.prod.js、webpack.dev.js）,然后提取公共代码（webpack.common.js，使用wepack-merge插件）等，就先不处理了，以上就搭建完啦~