vue.js — 安装Webpake创建一个完整的项目并上传至码云

1. 进入到项目文件夹目录，并安装Webpake组件

cd C:\Users\fangyan\Desktop\anli   //根据自己文件夹的路径填写
npm i webpack -g   //全局安装 webpack 

看到 VS code控制台上出现以上字眼时，表示安装成功

2. 在文件夹中构建一个自己的项目

vue init webpack vuedemo   //创建一个名为 vuedemo 的项目

看到 VS code控制台上出现以下字眼时，按照自己的需要选择 Yes 和 No：

然后等待安装完成，看到以下字眼时，表示成功：

接着，在 VS code控制台分别输入

cd vuedemo   // 第一步，进入文件夹里面的项目
npm run dev  // 第二步，将刚刚运行的项目跑起来

3. 创建项目成功
   当 VS code控制台出现以下字眼时，按住Ctrl键并点击http://localhost:8080
   
   这时就能看到我们的项目在浏览器里面跑起来了：
   
   同时再去看我们创建项目的文件夹时，会发现多了很多新的文件夹和文件：
   
   到这里，我们创建一个真正的项目就完成了，接下了我们就可以在这个项目里面开始编辑代码，一步步完善了。
4. 认识项目中主要的文件夹和文件
   一般我们会在 src 文件中编写自己的代码，但往往一个项目会涉及到很多的页面，如果全部放在一个文件夹下面的话，后期的维护会非常艰难，所以在前期我们就应该分好类：
   
   components 文件夹用来放我们平时编辑的页面内容
   css 文件夹用来放各种 css 样式表
   image 文件夹用来装图片
   lib 文件夹用来装我们引入的各种组件的 css、fonts、js 等文件
   router 文件夹用来装路由文件
   App.vue 是我们页面的入口文件
   main.js 是程序入口文件
5. 创建码云账号，并下载git
   没有码云账号的同学先要申请一个码云账号，关于码云的介绍，可以先百度一下。
   第一次要上传代码时，首先要生成一个 SHH 公钥，登陆码云后，鼠标移动到右上角在弹出的下拉列表中点击设置，然后点击页面左侧的 SHH 公钥，添加自己的公钥：
   
   添加完成后，点击新建仓库：
   
   新建仓库时，页面上会有一些默认勾选了的选项，我们先把这些选项全部去掉，直接点击创建按钮：
   
   接下来我们会看到这个页面，正常情况下，我们要按照第三步，将代码在控制台中运行，但如果没有下载 git 的同学需要先自行下载一下 git
   
   下载好了 git 的同学可以直接复制码云上的代码在 VS code控制台中粘贴。
6. 将一天的代码上传到码云
   写完一天的代码后，我们可以直接通过 VS code将代码上传到码云中。
   点击侧边栏中的第三个图标，下图中的解释是我们在提交代码时常关注的点：
   
   当我们编辑了项目中的某个文件时，图标立刻会有下标显示，当修改完成后我们需要添加备注并提交自己的修改。
   但这里的提交，是在我们计算机本地的提交，我们想要将代码提交到码云上，还要经行下一步操作：
   
   当完成这一步后，我们的代码就自动上传到码云上了。
   这时查看码云，会发现仓库中刚刚上传了新的代码块。