徒手撸个vue项目框架（上）

最新推荐文章于 2023-08-29 16:41:29 发布

萌萌哒草头将军

最新推荐文章于 2023-08-29 16:41:29 发布

阅读量507

点赞数 1

分类专栏：前端学习文章标签： vue.js webpack4 vue框架前端构建 JavaScript

本文链接：https://blog.csdn.net/qq_41625881/article/details/94429711

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述
写这篇文章的目的，更多是让自己更熟悉vue-cli脚手架创建项目的依据和项目结构，其次是希望我的学习过程可以帮到有疑惑的同学，有什么错误还希望可以得到指教

为什么要分上、下，因为最近学习react.js，发现项目框架除了使用的js库不同（vue.js、react.js），配置基本上是大同小异的

这也是我占坑（脸大）的理由

徒手撸个vue项目框架（上）

徒手撸个vue项目框架（下）

徒手撸个react项目框架（上）

徒手撸个react项目框架（下）

一、准备工作

1.新建vueProject文件夹

进入根目录,初始化项目

cd vueProject

npm init -y // -y是采用默认配置

此时目录出现package.json文件

2.创建项目结构

在根目录下新建src文件夹，在src下暂时新建名为index的js文件作为入口文件

根目录下创建一个index.html,作为入口页面

3.使用webpack

下载webpack时你可能会出现无限下载webpack-cli的问题，这是因为你没有先全局安装webpack和webpack-cli的原因

// webpack4.X开始webpack-cli被提出来作为一个独立的包了
// 在下载webpack同时也要下载webpack-cli,且必须同时下载否则会报错，因为版本不匹配
cnpm install webpack-cli webpack --save-dev

webpack默认只能打包js模块，它可以将你写的多个js模块打包成一个js文件，最后在入口页面引入它

webpack4开始默认大于配置，换句话说可以不用再引入一个配置文件来打包项目，因此他有很多默认值

默认入口文件是src下的index.js，输出为dist目录下的main.js（假如没有dist目录会自动创建）

但是它仍然是高配置的，假如需要我们只需在项目根目录下新建webpack.config.js来进行一切的配置

相比于webpack4之前的版本，它的配置项多出一个mode选项，可选值为"development" 或 “production”（默认），它们的区别就是development打包输出的文件不是压缩版本的

4.使用vue.js

cnpm install vue@2 --save-dev

index.js中

// index.js
import Vue from 'vue'

new Vue({
    el: '#app',
    msg: 'hello vue'
})

index.html中

//  index.html
<div id ="app">{{msg}}</div>

使用webpack打包，将打包后的文件引入页面，打开浏览器运行，此时会报如下警告

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. 
Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)

这是因为vue有两种构建版本的代码：完整版和只包含运行时版，完整版是包含编译器和运行时

解决方案多种多样的，官方做法是给vue设置别名

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js"  // 这里根据你使用的版本引入vue/dist 下对应的版本就行
    }
  }
};

添加如上配置打包后，刷新浏览器，可以正常显示msg的值了

这里准备工作已经完成了，但是功能太捉急了，所以接下来就是webpack的施展才华的时候了

二、完善框架功能

1.使用webpack-dev-server

每次写完新的内容要想看到效果，就必须使用webpack进行打包，我们更希望当代码改变时自动打包编译

webpack-dev-server可以帮我们做到！

a.下载

cnpm i webpack-dev-server --save-dev

b.使用

假如像使用webpack命令一样使用使用webpack-dev-server是局部安装的，使用局部安装的包，是完全行不通的，因为命令行里只能使用全局安装的包，
webpack-dev-server是局部安装的，使用局部安装的包，我们需要使用在package.json中配置scripts

// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
},

然后再命令行使用npm run dev

npm run dev

注意看下面的节选的代码

npm run dev

> vueproject@1.0.0 dev C:\myProject\vueProject
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\myProject\vueProject
i ｢wdm｣: Hash: e70fb3ae9bf074915cad
Version: webpack 4.35.0

从这里我们知道两件事：
首先，我们的项目运行在本机8080端口，其次webpack的output输出在根目录下,所以记得修改index.htmlmain.js的路径，否则你是看不到新的效果的

但是我们在根目录下并没有看到这个文件，这是因为它被放在内存中（这样的读写速度快），而不是磁盘中，另外我们还可以修改端口，甚至可以在编译完成后自动打开浏览器

它具体的配置可以是在webpack的devServer项

devServer:{
    host: '127.0.0.1',
    port: 8080,
    open: true
}

也可以是在cli里，这是最暴力的方式，但是端口还是放在devServer里，方便以后项目的配置

// package.json
"scripts": {
    "dev": "webpack-dev-server --open --port 30000"
},

2.使用html-webpack-plugin

既然将main.js放在内存中可以加快读写速度，那是不是把页面放在内存中可以进一步加快读写速度了？

答案是肯定的！使用html-webpack-plugin就可以做到

a.下载

cnpm i html-webpack-plugin --save-dev

b.使用

// webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin')
...
plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./index.html"),
      filename: "index.html"
    })
  ],

上面的代码是根据磁盘中的index.html在内存中生成一个index.html，我们在浏览器中审查页面发现会多一个script标签，这是插件自动将内存中的main.js加入到内存页面中了，所以我们这是应该删除手动添加的script标签

// index.html
<body>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <!--删除或者注释掉 <script src="./main.js"></script> -->
</body>

三、继续完善框架（项目）功能

到目前为止框架已经可以自己监听改变作出反应了，但是就vue本身来说还是很简陋的，它还没有有组件功能，也无法编译样式，等等。前面说过，webpack默认是只能处理js文件的，但是loader使得webpack可以处理更多类型的文件。接下来使用loader继续完善它

1. 组件功能vue-loader

组件功能是vue特有的生态vue-loader，官网中可以看到，它配合vue-template-compiler，将组件中的html、js、css单独提出来交给相应的loader处理

a.下载

两个loader都需要下载

cnpm i vue-loader vue-template-compiler --save-dev

b.使用

在webpack.config.js中

 module: {
    rules: [{ test: /\.vue$/, use: "vue-loader" }]
  },

如果仅是如此设置，浏览器啊会报错

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

这是因为vue-loader和别的loader不一样，他必须要有一个插件支持，这个插件在./node_modules/vue-loader/lib/plugin下，官网给出示例：

const VueLoaderPlugin = require("./node_modules/vue-loader/lib/plugin");

  module: {
    rules: [{ test: /\.vue$/, use: "vue-loader" }]
  },
  plugins: [
    ...
    new VueLoaderPlugin(),
    ...
  ],

2.处理样式

处理样式使用的是css-loader和style-loader

a.下载

cnpm i css-loader style-loader -save-dev

b.使用

 module: {
    rules: [
        ...
      { test: /\.css$/, use: ["style-loader", "css-loader"] }
    ]
  },

但是项目中我们可能使用less或sass等写样式，道理是一样的，它也有自己的loader

a.下载

cnpm i less-loader -save-dev

b.使用

 module: {
    rules: [
        ...
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }
    ]
  },

3.处理图片

.test{
    background-image: url(../imgs/11.jpg);
}

当我们在组件的style中使用url()会报错，因为vue-loader无法处理url，这时就需要使用url-loader

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

a.下载

url-loader内部使用了file-loader，所以两个loader要同时下载

cnpm i url-loader file-loader --save-dev

b.使用

基本的使用如下

module: {
    rules: [
        ...
        { test: /\.(jpg|png|jpeg|gif|bmp)$/, use: "url-loader" } // 包括字体、视频格式
    ]
  },

c.options

细心的同学会发现，虽然图片可以显示了但是审查元素时发现,图片的名称和路径变化了，
这是因为url-loader会将图片编译到内存中，并且给它设定一个哈西值作为身份标识，当第二次用到这个文件时直接调用它，而不是在次编译
在这里插入图片描述
一般它后面可以放一个options对象，可以控制当图片的l字节大小大于limit属性时触发某些期望的设置

 module: {
    rules: [
      {
        test: /\.(jpg|png|jpeg)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 8000,    // 当文件字节大小超过限定值时触发后面的设置
            name: "[hash:8]-[name].[ext]"  // 这是在原先的名称和后缀名前加了八位的哈希码
          }
        }
      }
    ]
  },

四、结语

目前基本的功能都有了，但是还是不够完美，下期将会引入vue-router，并且使用UI框架，对业务进行一些封装，希望可以帮助到你，谢谢阅读到这的你，有问题可以及时告诉我，我立马改正

萌萌哒草头将军

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
徒手撸个vue项目框架（上）

写这篇文章的目的，更多是让自己更熟悉vue-cli脚手架创建项目的依据和项目结构，其次是希望我的学习过程可以帮到有疑惑的同学，有什么错误还希望可以得到指教为什么要分上、下，因为最近学习react.js，发现项目框架除了使用的js库不同（vue.js、react.js），配置基本上是大同小异的这也是我占坑（脸大）的理由徒手撸个vue项目框架（上）徒手撸个vue项目框架（下）徒手撸个reac...
复制链接

扫一扫