手动实现一个vue cli

手动实现一个vue cli

手动实现一个vue cli

1. 思考准备

最一开始：创建一个web项目，所以需要一个html 文件，又是一个Vue 项目，所以需要一个div，并指明一个id.

我们使用webpack 打包后的文件，需要被引入，bundle.js, 应该把它放在dist （分发）文件夹。

----> 指明id 的 div 的html 文件
----> dist 文件夹

目前结构为：

.
└── dist
    └── index.html

index.html 内容为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>VueStarter</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

2. 我们组织源码将会放在名为src的目录，webpack 打包需要一个入口文件，我们取作 main.js

.
├── dist
│   └── index.html
└── src
 └── main.js

3. 先预想以下会用到哪些基本依赖，第一个容易想到的是Vue, 然后是我们假设项目需要使用elementUI , 还有axios ，先就这些：

npm i vue element-ui axios

最终我们需要的核心文件是打包后的bundle.js , 接下来需要用到的核心是webpack , 所以安装 webpack

以及想到，需要引入vue 的代码 vue-loader 以及 .vue 文件的解析依赖 vue-template-compiler

样式sass-loader 以及sass 本体

处理后的css 文件需要通过css-loader 加载，然后被style 标签解析，需要用到 style-loader

还需要babel 来处理es6的新语法，所以需要安装

babel babel-loader @babel/core babel 的预设配置 @babel/preset-env(env 代表兼容最新的语法)

# -D 指的是开发环境
npm i -D webpack webpack-cli vue-loader vue-template-compiler sass-loader sass css-loader style-loader babel-loader @babel/core @babel/preset-env

4. 我们的目标是要把src 中的从main.js 开始去编译-打包，到dist 文件夹中去，所以我们需要配置文件，进行配置。所以创建webpack 的配置文件， webpack.config.js

发现没有自动生成 package.json 文件，命令 npm init 手动生成，将入口文件指定为main.js
.
├── README.md# 手动生成的
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── src
└── webpack.config.js

5. 编写配置：

基本结构熟悉：

module.exports = {
entry:'',//入口文件
output:{//出口文件，
 path:'',
 filename:'',
},
module:{//webpack 中一切皆模块
 rules:[
   { test:/\.vue$/,use:'vue-loader'},
   ....
 ]
},
plugins:[//插件用于增强webpack
 new PluginsA(),//每一个插件就是一个实例
 new PluginsB(),
 ...
]
}

开始填充内容：

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
entry: "./src/main.js", //入口文件 绝对路径 / 相对路径
output: {
 //出口文件，
 path: path.resolve(__dirname, "dist") + "", //绝对路径 __dirname 是node "当前所在路径pwd" , 由于window 的目录分隔符是 '\', 而类nix是 '/'， 为了保持灵活性，使用了node 内置的path 对象方法,将自动将当前系统目录分隔符和目录名拼接
 filename: "bundle.js",
},
module: {
 //webpack 中一切皆模块
 rules: [
   { test: /\.vue$/, use: "vue-loader" },
   /**
    * 处理.vue 文件的加载, 写法可以指定
    * 单个依赖 - String，
    * 单个带配置的依赖 - {}
    * 多个不带配置的依赖 - []String ,
    * 多个带配置的依赖 []Object
    * { test: /\.vue$/, use: [{loader:'vue-loader',options:{}},{}...] },
    */
   {
     test: /\.s[ca]ss$/,
     use: ["style-loader", "css-loader", "scss-loader"],
   }, //要注意顺序，依次从后往前解析
   {
     test: /\.m?js$/, //.msj 是es6 的模块化js 文件
     use: {
       loader: "babel-loader",
       options: {
         presets: ["@babel/preset-env"],
       },
     },
   },
   {
     //图片处理
     // test: /\.(png|jpe?g|gif|svg|webp)$/,use: { laoder: "file-loader", options: { esModule: false } },//老语法
     test: /\.(png|jpe?g|gif|svg|webp)$/,
     type: "asset/resource",
   },
 ],
},
plugins: [
 //插件用于增强模块
 // vue-template-compiler 的作用是解析.vue 文件内部时，遇到js 块和css 块时的处理方式，复用我们上面定义的规则
 new VueLoaderPlugin(),
],
}

6. 编写入口文件 main.js

import Vue from "vue";
import App from "./App.vue";

new Vue({
el: "#app",
render: (h) => h(App), //将App 依赖通过渲染函数渲染成DOM 节点,挂载到 #app 节点下
});

<!--App.vue-->
<template>
<div>hello vue starter</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped></style>

7. 准备跑起来项目，创建一个快捷脚本去调用非全局webpack 命令

#package.json
"scripts": {
 "serve": "webpack --mode=development --watch", 
 "build": "webpack --mode=production"
},

在package.json 文件中指定的 script 脚本会自动去执行node_modules/bin 下的脚本， mode 选项指定启动模式：

production : 生成环境，压缩代码，无错误提示

development ：开发环境，不压缩代码

watch ：检测文件变化，自动重新编译打包

8. 启动项目

cmd 执行命令 npm run serve

dist 目录下生成了 bundle.js 文件，

此时打开dist 目录下的index.html 文件。将会看到App.vue 中写的内容：

这说明初步成功了。

9. 做一些增强，引入路由

安装依赖

npm i vue-router
# -S 是默认参数

创建 /router/index.js 并编辑：

import VueRouter from "vue-router";
import Home from "../pages/Home.vue";
import Vue from "vue";

Vue.use(VueRouter);

const router = new VueRouter({
routes: [
 {
   path: "",
   component: Home,
 },
 {
   path: "/me",
   component: () => import("../pages/About.vue"),
 },
],
});

export default router;

main.js 中引入：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

new Vue({
el: "#app",
router,
render: (h) => h(App), //将App 依赖通过渲染函数渲染成DOM 节点,挂载到 #app 节点下
});

App.vue 注册 <router-view> 标签：

<template>
<div>
 <span>hello vue starter</span>
 <div><button @click="$router.push('/')">HomePage</button></div>
 <div><button @click="$router.push('/me')">About Me</button></div>
 <router-view></router-view>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped></style>

启动程序 npm run serve

10. 进一步增强，引入webpack 开发服务器

```bash
npm i -D webpack-dev-server
```

修改启动脚本：
pacakge.json

```json
"serve": "webpack --mode=development --watch",
```

修改为：

```json
"serve": "webpack serve --mode=development",
```

> webpack -dev-server 提供了子命令serve 并会自动watch

配置webpack.config.js

启动项目：

```bash
npm run serve
```

![image-20211102000024219](https://img2020.cnblogs.com/blog/1735896/202111/1735896-20211102002121545-385713942.png)

![image-20211102000046376](https://img2020.cnblogs.com/blog/1735896/202111/1735896-20211102002121262-958672201.png)

11. 优化配置，自动打开浏览器

webpack.config.js:

```json
  devServer: {
    static: "./dist",
    open:true
  },
```

12. 更多

```json
const path = require("path");

const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  entry: "./src/main.js", //入口文件 绝对路径 / 相对路径
  output: {
    //出口文件，
    path: path.resolve(__dirname, "dist") + "", //绝对路径 __dirname 是node "当前所在路径pwd" , 由于window 的目录分隔符是 '\', 而类nix是 '/'， 为了保持灵活性，使用了node 内置的path 对象方法,将自动将当前系统目录分隔符和目录名拼接
    filename: "bundle.js",
  },
  module: {
    //webpack 中一切皆模块
    rules: [
      { test: /\.vue$/, use: "vue-loader" },
      /**
       * 处理.vue 文件的加载, 写法可以指定
       * 单个依赖 - String，
       * 单个带配置的依赖 - {}
       * 多个不带配置的依赖 - []String ,
       * 多个带配置的依赖 []Object
       * { test: /\.vue$/, use: [{loader:'vue-loader',options:{}},{}...] },
       */
      {
        test: /\.s[ca]ss$/,
        use: ["style-loader", "css-loader", "scss-loader"],
      }, //要注意顺序，依次从后往前解析
      {
        test: /\.m?js$/, //.msj 是es6 的模块化js 文件
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        //图片处理
        // test: /\.(png|jpe?g|gif|svg|webp)$/,use: { laoder: "file-loader", options: { esModule: false } },//老语法
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        type: "asset/resource",
      },
    ],
  },
  plugins: [
    //插件用于增强模块
    // vue-template-compiler 的作用是解析.vue 文件内部时，遇到js 块和css 块时的处理方式，复用我们上面定义的规则
    new VueLoaderPlugin(),
  ],
  devServer: {
    static: "./dist",
    open: true,
    host: "local-ip", //启动地址为局域网ipv4 地址
    port: 3333, //手动指定地址，
    onListening(devServer) {
      //命令行自定义输出
      console.log(
        "Listening :http://",
        devServer.server.address().address,
        ":",
        devServer.server.address().port,
      );
    },
  },
};
```

秒客网

手动实现一个vue cli