vue 开发环境搭建
Vue3 开发环境搭建
初始化
-
创建一个文件夹，
手动在文件管理器里面创建或者通过命令创建，
mkdir vuewebpack && cd vuewebpack
创建 vuewebpack 文件夹 并切换到 vuewebpack 文件夹下面
-
pnpm 初始化工程
pnpm init -
安装 vue
pnpm i -S vue -
安装 webpack、webpack-cli 等等
pnpm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader
webpack 的安装使用
html-webpack-plugin 的安装使用
clean-webpack-plugin 的安装使用
webpack 只能处理 *.js 和 *.json 其它类型的文件都需要使用 loader。所以要使用 vue 的单文件组件首先要安装 vue-loader
安装之后，安装之后要在 webpack 的配置里面，添加 vueLoaderPlugin，它的作用基本可以理解为，把 vue-loader 加载进来的文件，将其中的代码分类交给不同的 loader 或者插件处理。例如 script 标签中的代码，交给 js 相关的 loader 以及插件。template 类的交给模板相关的插件。
- 运行
运行npx webpack server即可启动开发环境，也可以在package.json 添加对应的script ，然后执行pnpm dev。
{
....
"scripts": {
"dev": "webpack server",
"test": "echo \"Error: no test specified\" && exit 1"
},
....
}
打开http://localhost:8080/ 即可看到运行结果。也可以使用–open 参数自动在默认浏览器中打开。
webpack-dev-server 插件生成的文件时存储在内存中的，并不会输出。所以看到到 webpack 处理后的文件，如果需要查看文件。可以在浏览器中访问 http://localhost:8080/webpack-dev-server 来查看输出到内存的文件。
引入 vue
创建文件目录如下
---vuewebpack
------public
---------index.html
------src
---------App.vue
---------index.js
------package.json
------pnpm-lock.yaml
------webpack.config.js
// index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
<template>
<div class="container">{{ count }}</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
};
</script>
<style scoped lang="scss"></style>
// index.js
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");
webpack 配置
// webpack.config.js
const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
mode: "development",
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
plugins: [
new HTMLWebpackPlugin({
template: path.resolve("./public/index.html"),
}),
new VueLoaderPlugin(),
],
};
处理样式
vue-loader 和它的插件，将 vue 文件中的代码分类，交给了不同的处理程序。template 中的交给vue/compiler-sfc了，script 中的交给了 webpack 自身的处理程序。但是没有安装和 style 相关的 loader 为什么没有报错呢，这是因为此时虽然存在 style 标签。但是标签内容是空的。而在 vue 文件组件中 style 并不是必须的。所以没有报错，如果向 style 标签中添加一些代码。再去运行 webpack 就会报错了。
安装样式相关的loader 和插件
pnpm i -D style-loader css-loader sass-loader sass
由于在 style 中指定了语言为 scss 所以需要再安装 sass-loader 和sass 来处理 scss。如果指定了其它语言要安装对应的 loader 即可。
sass-loader 是将 scss 代码加载进来并调用 dart-sass 进行处理，dart-sass 将 scss 代码编译成 css 代码。 css-loader 是处理 css 代码中的 url、以及@import 语法等等。style-loader 则通过 style 标签将 css 插入到 DOM 中。
根据上面的每个 loader 的作用判断，在 webpack 配置文件 webpack.config.js 中添加。loader 调用顺序从右至左，从下到上。
...
module:{
rules:[
...
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
...
]
}
此时再次启动 webpack 即可正常编译 style 标签中的内容了。
重置浏览器样式
安装 normalize.css ，
pnpm i normalize.css
然后在index.js 文件中引入即可。normalize.css 是为了重置浏览器自带的样式，从而保证各个浏览器的css行为一致。
单独抽离css 文件
在生产环境中我们不能把所有的css文件插入到html里面，所以需要将css文件抽离出来单独处理，这个时候就需要使用mini-css-extract-plugin ，这个插件可以将css代码抽离出来成为单独的文件。
style-loader 和 mini-css-extract-plugin 不可以同时使用
压缩css文件
压缩CSS：css-minimizer-webpack-plugin
清除上次的打包产物
webpack每次打包之后会产生dist文件，由于有hash的原因文件名不同，所以每次重新打包之前需要将上次的产物清除，
webpack的其他优化
webpack 打包时间优化
准备基于时间的分析工具 - SMP
需要一类插件，来帮助我们统计项目构建过程中在编译阶段的耗时情况
[speed-measure-webpack-plugin]
[webpack-bundle-analyzer]
使用 babel
webpack 能对 JavaScript 进行处理，只是压缩等操作。如果需要使用 ES6、ES7 等新的语法，就需要使用 babel 了。babel 将其编译后使得不支持 js 新特性的环境也能使用 js 新特性了。
使用 eslint 和 prettier
eslint 和 prettier 能够对代码进行语法检测以及代码风格优化。
eslint 支持 json
eslint-plugin-jsonc
jsonc-eslint-parser
2305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
