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

2024-05-17 14:40:11

说在前面

现在前端发展的很迅速，一些脚手架（比如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文件夹就是一个最基础的部署文件了，可以将文件夹部署到服务器上。

说到最后

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

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

从零开始搭建一个GIS开发小框架（一）——基本框架
目录 1.概述 1.1 项目背景 1.2 传送门 2.技术选型:GMap.NET 3.底图功能实现 2.1 方式一:在线地图(以高德为例) 2.2 greatmaps生成底图(瓦片地图) 3.搭建主程 ...
【前端】搭建一个VUE框架
大伙好,最近狠狠焦虑了,因为想搞前端技术岗找暑假实习担心自己能力不够,还是希望如果有同学大学期间就决定毕业找工作的话,一定要抓住机会大学期间狠狠锻炼本领噢,不要虚度光阴说了点题外话,回到正题,焦虑的 ...
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
从零开始搭建一个react项目
Nav logo 120 发现关注消息 4 搜索从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
从零开始搭建一个测试技术练习平台
工作中,要不断学习,为了快速上手,我打算写一个有增删改查功能的Javaweb项目,方便以后练习各种测试技术. 环境准备 1.准备一台电脑 2.官网下载最新版Intellij IDEA,破解步骤找&qu ...
利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
如何利用 GitHub 从零开始搭建一个博客
趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域名是 nightteam.cn,所以这里官方博客使用了二级域名 blo ...
从零开始搭建深度学习服务器: 基础环境配置（Ubuntu + GTX 1080 TI + CUDA + cuDNN）
从零开始搭建深度学习服务器: 基础环境配置(Ubuntu + GTX 1080 TI + CUDA + cuDNN) 首先先声明一下这篇是转载来自 : 从零开始搭建深度学习服务器: 基础环境配置( ...
从零开始搭建一个语音对话机器人
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] ♪ 点击上方绿标收听从零开始搭建一个语音对话机器人从零开始搭建一个语音对话机器人目录 01-初心缘由 01-准备工作 02-语音机器 ...

最新文章

热门文章