briup线上实训-2

项目初步导入

在实训的第二天，导师给了我们一个优秀的VUE架构项目，所以对于我们这些菜鸟来说，怎么让项目跑起来就显得至关重要。最先需要确保我们的git，node.js已经在电脑上装载好了。可以通过命令来查看是否安装完毕：
安装前期准备流程： 1. 打开dos 2. 在dos中测试 node -v git --version cnpm -v
步骤一：找到文件夹所在位置，用vscode打开
步骤二：装载依赖：> d:/briup > cd smart d:/briup/smart > cnpm install
如果已经显示all packages already即已经安装成功
步骤三：npm run dev
成功运行即会显示加载的进度条，后默认在9528接口打开项目。
如果不成功，则多半是node没有加载好，可以删了重新再重复以上步骤。
但是在windows10中，经常会由于系统安全，不允许我们在第三方的terminal中直接调用命令，所以需要在powershell中进行授权，具体可以参考其他优秀博主的博客解决
如果安装成功了，说明你是那个幸运儿，因为同学们也有因为各种问题无法安装成功的。
但是事实证明安装是无法一劳永逸的，后来打开项目时又出现过问题，无一例外全都删除node文件夹，重新加载依赖。

熟悉项目

    node_modules  node依赖的模板，cnpm install，实际上就是将下载的依赖安装到这个目录下。
    public  
      index.html
    src       源码
      layout  整个网页的布局文件
      icons   图标
      router  路由  单页面程序
      store   状态机
      styles  样式
      pages   自定义网页（我们写的网页）
      utils   工具  ajax 、cookie...
      views   视图，系统视图
    App.vue
    main.js   入门文件
    package.json  项目核心配置文件

项目新页面的添加

    1. 在pages中添加一个vue页面
    Map.vue
      1) 模板（html）
      2) js
      3) css
	 <template>
  	<!-- 模板，html -->
  	<div class="map">
   	<!-- 地图渲染的容器 -->
    <div id="container"></div>
 	 </div>
	</template>
	<script>
	// 脚本，js
	export default {
  	// dom追加到网页中
 	 mounted(){
 	   var map = new AMap.Map('container');
	  }
	}
	</script>
	<style scoped>
	/* 样式，css */
	#container {
	 height:500px
	}
	</style>
	
    2. 将该网页注册到路由
    src/router/index.js
 // html与css内容复习
  {
    path: '/layout',
    component: Layout,
    children: [
      {
        path:"index",
        component: () => import('@/pages/Layout'),
        meta: { title: '疫情动态', icon: 'eye' }
      }
    ]
  },

如何将代码上传到gitee上

之前老师的每次代码都是直接让我们在码云上面直接查阅的，但是今天老师让我们把自己的代码上传到gitee上，期间我上传了很多次，发现了很多bug。时至今日我上传的项目还不能达到老师上传项目的那种效果。SAD

      使用步骤
      1. 从dos中进入到项目中去
        c:/users/charles > d:
        d: >
        d: > cd briup
        d:/briup > cd smart
        d:/briup/smart > 
      2. 查看git仓库
        > git status

      3. 将当前项目文件初始化为仓库
        如果当前文件夹不是git仓库，我们再初始化，如果已经是仓库，无需初始化
        > git init
        执行完毕后当前仓库中就出现了.git的隐藏文件夹
      4. 将修改/新增文件加入到git缓存
        > git add *
        将所有的文件加入到git缓存中，隐藏文件默认不加
        注意：检查.gitignore有没有被加入缓存，如果没有，一定强制加入，否则后患无穷
      5. 将缓存内的内容提交成为一个版本。
        > git commit -m "你提交了什么东西？"
        例如：
        > git commit -m "提交了统计页面模块"
        首次提交会出问题，告诉你无法提交，提示你应该先告诉git你是谁
          > git config --global user.email "licy@briup.com"
          > git config --global user.name "plusyu"

    2. gitee的使用
      1. 新建远程仓库
      2. 将本地仓库与远程仓库绑定
        一个本地仓库只能与一个远程仓库进行绑定，只需要绑定
        > git remote add origin https://gitee.com/plusyu/shixun_hdjd_test.git

      3. 将本地仓库提交到远程
        > git push origin master

    3. 开发过程
      完成阶段性任务后
      > git add *
      > git commit -m ""
      > git push origin master

如果实在上传不了，老师让我们删库再重新连接。幸亏这是一个个人仓库啊，不知道哪里才会缺一个删库跑路的程序员。希望接下来的实训生活顺顺利利吧！拜托了！