从零开始搭建一个前端框架（一）环境准备并完成简单打包

Run_youngman

已于 2022-02-09 15:14:54 修改

阅读量3.8k

点赞数 4

文章标签： webpack javascript 前端

于 2022-02-09 15:09:20 首次发布

本文链接：https://blog.csdn.net/run_youngman/article/details/122842496

版权

说在前面

现在前端发展的很迅速，一些脚手架（比如vue-cli）也很方便去搭建和应用，日常使用都没有问题，但是我觉得脚手架用多了总会让人去忽略一些基础的问题，对于系统后续的提升也无从下手，所以突发奇想，自己按照vue-cli的标准搭建一个框架，看看都要经历些什么。

源代码参考

准备

首先，要安装node，安装好以后新建一个文件夹，然后初始化项目，node和npm是绑定的，所以不需要单独安装npm。

npm init

安装webpack打包工具

npm install webpack webpack-cli --save-dev

安装最新的vue版本：

npm install vue@next
npm install -D @vue/compiler-sfc

首先看看我们的文件结构：

-- src
  -- index.js
-- index.html
--package.json  //npm init时自动生成

index.html

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  </head>
  <body>
    <div id="app">{{message}}</div>
    <!-- built files will be auto injected -->
    <script src="src/index.js" charset="utf-8"></script>
  </body>
</html>

index.js

const Vue = require('vue');
const Index = {
    data() {
        return{
            message: 'Hello Vue!'
        }
    }
}
Vue.createApp(Index).mount('#app')

为了符合日常打包的习惯，在pageage.json文件中配置入口语句：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1", // 默认
    "build": "webpack" // 新增
},

此时执行命令，npm run build （package.json中配置了build命令）

默认会自动生成一个dist文件夹，然后将打包生成的名为main.js的文件。

此时我们在dist文件夹下新建index.html文件:

总体内容就同之前的index.html一致即可，但是在文件引用时，需要改成main.js文件。

此时，直接浏览器打开dist目录下的html文件，就可以看到：

在这里插入图片描述

这就说明我们正确的完成了打包，message已经被vue绑定到变量并完成了替换。现在的dist文件夹就是一个最基础的部署文件了，可以将文件夹部署到服务器上。

说到最后

敬请期待从零开始搭建一个前端框架（二）:简单配置优化打包过程

Run_youngman

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
从零开始搭建一个前端框架（一）环境准备并完成简单打包

说在前面现在前端发展的很迅速，一些脚手架（比如vue-cli）也很方便去搭建和应用，日常使用都没有问题，但是我觉得脚手架用多了总会让人去忽略一些基础的问题，对于系统后续的提升也无从下手，所以突发奇想，自己按照vue-cli的标准搭建一个框架，看看都要经历些什么。源代码参考准备首先，要安装node，安装好以后新建一个文件夹，然后初始化项目，node和npm是绑定的，所以不需要单独安装npm。npm init安装webpack打包工具npm install webpack webpack-cli
复制链接

扫一扫