(一)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 --save
2)挂载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插件)等,就先不处理了,以上就搭建完啦~