从零开始搭建一个前端框架(一)环境准备并完成简单打包
说在前面现在前端发展的很迅速,一些脚手架(比如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文件夹就是一个最基础的部署文件了,可以将文件夹部署到服务器上。
说到最后
敬请期待 从零开始搭建一个前端框架(二):简单配置优化打包过程
更多推荐
所有评论(0)