从零开始搭建一个前端框架（一）环境准备并完成简单打包
说在前面现在前端发展的很迅速，一些脚手架（比如vue-cli）也很方便去搭建和应用，日常使用都没有问题，但是我觉得脚手架用多了总会让人去忽略一些基础的问题，对于系统后续的提升也无从下手，所以突发奇想，自己按照vue-cli的标准搭建一个框架，看看都要经历些什么。源代码参考准备首先，要安装node，安装好以后新建一个文件夹，然后初始化项目，node和npm是绑定的，所以不需要单独安装npm。npm
说在前面
现在前端发展的很迅速，一些脚手架（比如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文件夹就是一个最基础的部署文件了，可以将文件夹部署到服务器上。
说到最后
敬请期待 从零开始搭建一个前端框架（二）:简单配置优化打包过程
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献8条内容
所有评论(0)