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后才能生成在内存里，与其他文件形成关联 |
image
Ⅰ.提示选取一个 preset（预设置）：
默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
image
Ⅱ.初始化项目成功，访问网页显示如下。
image
Ⅲ.npm run serve:
其实就是执行了vue-cli-service serve 命令，它会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
Ⅳ.vue-cli3文件介绍：
image
image
image
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 (查看分支是否切换成功) |
image
3.提交到github:集合远程git工作流
| NO. | 步骤描述 |
|---|---|
| 1 | 新建github远程仓库（这里不再赘述，不懂请看之前的Git教程） |
| 2 | git push 远程地址 分支名 |
| 3 | (每天上班) git pull (拉取最新) |
| 4 | (每天过程循环) git add .+ git commit -m"信息"(提交更新并备注) |
| 5 | (每天下班) git push 地址 分支名 |
image
本文同步发表在我的个人博客：https://www.lubaojun.com/
