Vue 后台管理项目2-项目初始化

项目初始化

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

V.删除默认路由页面：

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/