构建托管于GitHub的Vue+Webpack的前端项目

布满荆棘的人生 2022-06-16 13:24 184阅读 0赞

*最近更新时间：2017年5月16日15:15:49*

[《我的博客地图》][Link 1]

优秀的前端工程师，总会探索未知的东西，通过学习和实践感受从无到有的体验，今天分享的是一个前后端分离的前端项目，该项目托管于GitHub可进行多人协作开发，通过VueJs框架构建，并由Webpack包管理工具进行模块打包和管理。

1、GitHub创建项目

如果您没有GitHub账号，请先行注册账号，之后进入自己账号进行如下操作；

点击 New repository，创建新项目，在新页面进行相关配置操作；

项目创建成功，会生成项目地址，如：https://github.com/wanshaobo/vue-example.git

此时，已将创建好远程代码仓库；

2、clone远程仓库项目到本地

如果您没有安装git工具，请先行安装git工具，可以参考我的文章[《Git和GItHub》][Git_GItHub]；

进入到你需要存放项目的路径，右键 => Git Bash Here，在git命令行窗口执行命令：

$ git clone https://github.com/wanshaobo/vue-example.git

此时，你创建的远程代码仓库已经复制到了你的本地计算机，你不仅可以在这个目录下进行项目开发，同时还可以将本地项目整体托管到GitHub上进行同步，而且，你的这个项目也可以多人进行协同开发；

3、构建Vue+Webpack的前端项目

这个项目依托于前端的自动化工具，因此，安装相关软件可以参考我的文章[《NodeJs安装+NPM配置》][NodeJs_NPM]；

安装和配置好node和npm，开始构建整个项目，步骤如下：

进入本地项目路径，如 E:\\project\\vue-example，右键 => Git Bash Here；

安装vuejs脚手架，用于自动化搭建需要的模板框架；$ npm install vue-cli -g

安装过程中，需要手动配置一些项目基本信息，根据项目需要自行进行配置；

检测脚手架是否安装成功，键入命令 $ vue 出现相关信息，表示安装成功；

利用脚手架（vue-cli包）自动化构建项目，会自动化生成项目目录，见本文第四项；$ vue init webpack

（$ vue init webpack vue-example01；表示在当前目录下新建文件夹vue-example01，并将该项目放置在vue-example01文件夹下面）

将git命令行窗口切换并进入项目 根目录 ./vue-example下，安装整个项目所需依赖包；$ cnpm install

启动项目；$ npm run de

此时，在浏览器地址栏中可以打开该项目，展示的内容为：

E:\\project\\vue-example\\src\\components\\Hello.vue；

项目地址为：http://localhost:8080/\#/

4、项目文件目录系统详解

通过WebStorm开发软件打开该项目，文件目录系统如下：

build文件夹，包括Webpack的基本配置，开发环境配置，生产环境配置。并且最终发布（$ npm run build）的代码会在这里；

build.js,

check-versions.js,

dev-client.js,

dev-server.js,

utils.js,

vue.loader.conf.js,

webpack.base.conf.js,webpack基本配置文件

webpack.dev.conf.js,

webpack.prod.conf.js,

config文件夹，配置路径端口值

node\_modules文件夹，存放依赖模块

src文件夹，开发目录，大多数开发工作是在这个文件夹下面进行的；存放 组件 和 文件

assets文件夹

components文件夹，存放项目组件

router文件夹

App.vue，项目入口文件

main.js，项目核心文件，全局配置；

static文件夹，静态资源文件，用来存放图片、字体等

.babelrc，babel配置文件

.editorconfig

.gitignore

.postcssrc.js

index.html，HTML模板，项目首页入口文件，build file will be auto injected，如果是移动端项目，需要在head标签中加入相关meta标签；

package.json，这个项目的整体配置文件

README.md，项目帮助文档，在创建GitHub远程仓库的时候，GitHub自动生成的文件；

5、Vue项目路由配置

未完待续...

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Git_GItHub]: http://blog.csdn.net/wanshaobo888/article/details/54134105
[NodeJs_NPM]: http://blog.csdn.net/wanshaobo888/article/details/70254917

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用git向GitHub上托管自己的项目

GitHub和Git的区别 Git连接GitHub——实现步骤用Git上传demo——实现步骤　　在工作中，我们经常会收集一些自己的小demo，可是这些

短命女/ 2024年02月18日 21:20/ 0 赞/ 44 阅读

相关如何使用GitHub托管自己的开源项目

如何使用GitHub托管自己的开源项目什么是GitHub 安装GitHub Desktop 创建仓库推送仓库到GitHub 什么是GitH

谁借莪１个温暖的怀抱￠/ 2023年06月20日 06:13/ 0 赞/ 43 阅读

相关如何使用github托管自己的项目

1.github客户端的操作 1.如果您还没注册github，请登录[github官网][github],点击Sign Up注册。 ![Center][]

心已赠人/ 2022年09月26日 12:00/ 0 赞/ 51 阅读

相关构建托管于GitHub的Vue+Webpack的前端项目

最近更新时间：2017年5月16日15:15:49 [《我的博客地图》][Link 1] 优秀的前端工程师，总会探索未知的东西，通过学习和实践感受从无到有的体

布满荆棘的人生/ 2022年06月16日 13:24/ 0 赞/ 185 阅读

相关使用Git托管项目到GitHub

关于Git的安装参考：[https://blog.csdn.net/qq\_32786873/article/details/80570783][https_blog.csdn

骑猪看日落/ 2022年05月23日 07:17/ 0 赞/ 258 阅读

相关 GitHub：如何托管一个项目

一.目的希望利用GitHub来进行项目的托管。保存一些自己做的Demo，项目。和小伙伴一起进行共同开发。瞻仰大佬们的项目细节。二.实

逃离我推掉我的手/ 2022年04月24日 08:58/ 0 赞/ 243 阅读

相关将项目托管到gitHub

一、下载并安装Git版本控制工具下载地址：[https://git-scm.com/downloads][https_git-scm.com_downloads] 注

た入场券/ 2022年02月04日 10:59/ 0 赞/ 344 阅读

相关本地项目托管到github上

一，步骤 1.在github上新建一个仓库 2.进入我的项目目录， git init //初始化本地仓库 3.git add .

╰+哭是因爲堅強的太久メ/ 2022年01月06日 09:55/ 0 赞/ 374 阅读

相关开源项目托管到GitHub上

前提是安装了git客户端 1.进入你的GitHub账户 2.点击new repositories 创建一个新的项目 ![1532809-2019072616

墨蓝/ 2021年11月17日 21:04/ 0 赞/ 446 阅读

相关 github托管代码

[https://www.cnblogs.com/Pual623548198/p/7092612.html][https_www.cnblogs.com_Pual6235481

缺乏、安全感/ 2021年11月10日 07:32/ 0 赞/ 373 阅读