Vue 后台管理项目2-项目初始化
2019-03-08 本文已影响466人
夜半暖人心
项目初始化
1.脚手架搭建项目
vue-cli3脚手架作用:自动帮我们完成webpack跟Vue相关的所有配置.
全局安装指令:cnpm install -g @vue/cli
,只要第一次安装就会全局存在脚手架,以后直接按照搭建步骤使用即可.
注意事项:
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),需要先通过 cnpm uninstall vue-cli -g
卸载它,再重新安装.
可以用指令检查版本:vue --version
搭建步骤
NO. | 步骤描述 |
---|---|
1 | vue create 新建文件名(该项目是manage) |
2 | cd manage (进入项目文件) |
3 | npm run serve (启动前端开发服务器,直接用浏览器打开vue文件没效果) |
注意 | 创建的项目文件名不能是中文,包裹创建项目的文件夹可以是中文 |
扩展:vue.js为什么需要npm run才能运行? | webpack的话,是用webpack-dev-server这个插件,比如页面入口文件main.js执行npm run后才能生成在内存里,与其他文件形成关联 |

Ⅰ.提示选取一个 preset(预设置):
默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。

Ⅱ.初始化项目成功,访问网页显示如下。

Ⅲ.npm run serve:
其实就是执行了vue-cli-service serve 命令,它会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
Ⅳ.vue-cli3文件介绍:



2.git本地托管
NO. | 步骤描述 |
---|---|
1 | 可以在manage项目内再打开一个终端,进行git托管和插件下载 |
2 | git add . (出现如下warning不影响,继续往下执行) |
3 | git commit -m"初始化" |
4 | git branch dev(创建dev分支) |
5 | git checkout dev (切换到dev分支) |
6 | git log --oneline (查看提交版本信息) |
7 | git status (查看分支是否切换成功) |

3.提交到github:集合远程git工作流
NO. | 步骤描述 |
---|---|
1 | 新建github远程仓库(这里不再赘述,不懂请看之前的Git教程) |
2 | git push 远程地址 分支名 |
3 | (每天上班) git pull (拉取最新) |
4 | (每天过程循环) git add .+ git commit -m"信息"(提交更新并备注) |
5 | (每天下班) git push 地址 分支名 |

本文同步发表在我的个人博客:https://www.lubaojun.com/