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后才能生成在内存里,与其他文件形成关联

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

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

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

Ⅳ.vue-cli3文件介绍:

V.删除默认路由页面:

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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容