移动端Vue项目总结——项目准备之搭建vue-cli脚手架

因为在职工作没有那么忙，且公司项目较简单，而且没有用到过框架enenen 一直有在学习vue，但还是对真正的实战项目存在很多疑问，于是利用工作完成之余，在慕课网上跟了一个vue实战项目，虽然不是很复杂，但也全面的了解了企业级别vue项目的大概流程，也算是对之前学习的vue只是进行了一个大的整合，总得来说收获还是巨大的，非常值！

学习的过程中，对项目一些重要的流程节点和注意事项做了详细的记录，那种大号英语笔记本记了密密麻麻的七大张，真的密密麻麻，毫不夸张，非常宝贝这些笔记，同时又很怕丢失，想着还是在博客上把重要的地方记录一下吧~ 感觉会累死我 略略略

一、项目准备

1、搭建vue-cli脚手架

其实之前有想过学习webpack，but接触了一点发现段位还是不够 vue-cli真是个好东西啊啊，webpack暂时是没那么影响我拥抱vue了，不过后面咱还是得学嘛，头发还在，学习不止！

搭建vue-cli脚手架要有以下这些前提

（1） 已安装node
浏览器直接官网下载安装即可，node安装成功，意味着npm也安装成功，就可以通过npm下载很多有用的库了

（2）本地已安装git
在这里插入代码片 同样官网下载，目的一是可以对代码进行管理，目的二，也是最关键的，就是下载了git后，我们的电脑会出现git Bash 这个工具，它的用处可就大了，因为vue项目中用到的一些命令，在我们window自带的cmd命令行里是运行不了的（mac您就不担心了），就必须使用到git Bash ，其实它跟cmd差不多，就是支持的命令多点儿呗

（3）已注册GitHub/码云账号
这里可以托管我们的代码，我这里选择的是码云，其实功能都差不多，就是码云更容易看得懂好操作些♪(^∇*)
个人主页→线上创建项目→私有创建
公钥配置
设置→ SSH公钥→点击 怎样生成？（会有一些命令，这些命令就是传说中需要linux环境 需要gitBash）运行提示的命令

|
|
|
↓

|
|
|
↓

|
|
|
↓

将公钥复制到SSH公钥

OK 完成线上线下关联，配置好公钥后，每次上传下载代码就可以不用身份验证了

下面就可以在本地试试将线上创建的项目下载下来了

点击项目 克隆/下载 点击SSH 复制地址

回到git Bash (以下统称为终端)
切换到希望安置项目的目录 运行

git clone 刚复制的地址粘贴进去

大功告成！

等等，好像脚手架还没搭建啊。。。

好的，准备工作做得差不多了 开始搭建vue-cli

vue.js官网 找到命令行工具 cli
①全局安装

npm install --global vue-cli

②初始化项目
切换到希望创建在的目录下

vue init webpack my-project(项目名)

一路回车，注意可以选择no的地方 如test、e2e
一路回车即可出现以下，就说明项目初始化完成

那么这个时候我们可以看到，项目文件夹出现了很多新的文件夹，这都是vue-cli为我们搭建好的目录结构，但是这些只是在本地存在。我们还需要同步到线上，怎么同步呢？

这里我们要记得几个常用的命令，在后面会经常用到

到终端 依次执行

git status //可以查看当前文件提交状态
git add . //把所有文件增加到git缓冲区
git commit -m ' init project' //提交并记录提交日志 单引号内
git push //推到线上 实现同步

到这里脚手架的搭建就完成啦

撒花撒花O(∩_∩)O

实际我的笔记记得很清晰地 博客可能写得还不是很熟练 希望可以表述的越来越好~

虽说作为一个程序员，这种看起来“死记硬背”的方式好像很low 我就保持微笑好了

记录下这些知识不是用来背的，这个习惯从高中就有了，遇到任何感觉记得没有那么牢的知识点会立刻记录下来，单词也罢，公式也好，都在一个本子上，不管之前有没有记过，只要碰到的时候感觉还是不那么清楚，就会再记一遍，没事的时候会翻翻看，但大多数东西都是在我一遍一遍的记录中记住的，我记得当时有个单词被我记了有不下于十遍才完全记住。

唠叨了这么多，只是想表达一句话吧，好记性不如烂笔头。我记下项目的过程，是为了每次哪怕扫一眼也会在脑海里重复整个项目清晰地脉络和结构，记下每一个坑，也是为了避免下次再跌倒。总之是每个人的学习方法不同嘛，小菜鸟只想把基础先打牢牢

嗯，我觉得我把博客写出了日记的感jio

下一总结见~~~