手把手教你构建一个web前端项目,全网最详细教程! |
您所在的位置:网站首页 › 创建一个web网页 › 手把手教你构建一个web前端项目,全网最详细教程! |
为什么80%的码农都做不了架构师?>>> 搭建一个前端项目的方式有两种:选择现成的项目模板、自己搭建项目骨架。 选择一个现成项目模板是搭建一个项目最快的方式,模板已经把基本的骨架都搭建好了,你只需要向里面填充具体的业务代码,就可以通过内置的工具与命令构建代码、部署到服务器等。 一般来说,一个现成的项目模板会预定义一定的目录结构、书写方式,在编写项目代码时需要遵循相应的规范;也会内置必要的工具,比如 .editorconfig、eslint、stylelint、prettier、husky、lint-staged 等;也会内置必要的命令(package.json | scripts),比如 本地开发:npm run dev、本地预览:npm run start、构建:npm run build、部署:npm run deploy 等。 github上比较好的项目模板: react-boilerplate ant-design-pro vue-element-admin react-starter-kit create-react-app create-lila-app(我自己用的,哈哈) 这些模板的使用又分为两种:使用 git 直接克隆到本地、使用命令行创建。 (使用现有模板构建的项目,可以跳过第 2 ~ 7 步) 1.1 使用 git 直接克隆到本地这是一种真正意义上的模板,可以直接到模板项目的 github 主页,就能看到整个骨架,比如 react-boilerplate、ant-design-pro、vue-element-admin、react-starter-kit。 以 react-boilerplate 为例: 克隆到本地: git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git切换到目录下: cd ;你的项目名字;一般来说,接下来运行 npm run install 安装项目的依赖后,就可以运行;有些模板可能有内置的初始化命令,比如 react-boilerplate: npm run setup启动应用: npm start这时,就可以在浏览器中预览应用了。 1.2 使用命令行创建 这种方式需要安装相应的命令,然后由命令来创建项目。 以 create-react-app 为例: 安装命令: npm install -g create-react-app创建项目: create-react-app my-app运行应用: cd my-app npm start 1.3 自己搭建项目骨架如果你需要定制化,可以选择自己搭建项目的骨架,但这需要开发者对构建工具如 webpack、npm、node 及其生态等有相当的了解与应用,才能完美的把控整个项目。 下面将会一步一步的说明如何搭建一个定制化的项目骨架。 2. 选择合适的规范来写代码js 模块化的发展大致有这样一个过程 iife => commonjs/amd => es6,而在这几个规范中: iife: js 原生支持,但一般不会直接使用这种规范写代码 amd: requirejs 定义的加载规范,但随着构建工具的出现,便一般不会用这种规范写代码 commonjs: node 的模块加载规范,一般会用这种规范写 node 程序 es6: ECMAScript2015 定义的模块加载规范,需要转码后浏览器才能运行 这里推荐使用 es6 的模块化规范来写代码,然后用工具转换成 es5 的代码,并且 es6 的代码可以使用 Tree shaking 功能。 参考: IIFE(Immediately-invoked function expression) Tree shaking webpack – tree-shaking |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |