美文网首页前端框架VUE
Vue 后台管理项目2-项目初始化

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

作者: 夜半暖人心 | 来源:发表于2019-03-08 08:19 被阅读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

    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/

    相关文章

      网友评论

        本文标题:Vue 后台管理项目2-项目初始化

        本文链接:https://www.haomeiwen.com/subject/elrlpqtx.html