Vue创建项目--（1）项目预热

环境配置

在完成一个大型前端项目过程中，为了线上保存代码，我使用了码云这一工具，以下是具体使用流程。

• 在码云中创建仓库(项目)
  注意：语言选择javascript、开源许可选择MIT、使用ReadMe文件初始化此项目。
• 线上/线下代码关联
  本地安装git(在命令行工具中使用 git --version测试是否安装成功)
  设置SSH公钥
• 下载项目到本地
  同样，在命令行工具中使用git clone + SSH地址

接下来，正式进入正题

全局安装 Vue-cli

npm install --global vue-cli

也可以使用cnpm install --global vue-cli命令，用cnpm代替npm可以是安装速度快一点，那么接下来，需要的环境和工具都安装好了，我们开始用vue来构建一个项目。

初始化项目

vue init webpak my-project

整个项目是基于webpack的，my-project是项目名称，可以自定义为你自己的项目名称。
命令行工具运行过程中会出现以下提示：上面都是一些基本的选项，如项目名称、项目描述、作者…
use ESLint to lint your code?
– 是否用ESLint规范代码，用于统一代码风格
pick an ESLint preset
– 用于选择编写vue时的代码风格
set up unit tests
– 是否需要安装单元测试
setup e2e tests with NightWatch
– 是否需要安装e2e测试

安装依赖

首先在命令行工具中进入到本地项目文件

cd my-project

npm install

npm run dev

这时候命令行工具中会提示

your application isrunning here：http://localhost:8080

在浏览器中打开显示如下，这样，就创建成功了。

但是，这时候本地仓库与码云仓库中文件数并不一致，我们希望git能保证线上线下代码保持一致，所以，接下来，我们需要做这些：

命令行工具中执行以下命令

git status  // 获取要添加到线上的所有文件
git add .   // 将获取的文件加载到本地缓冲区
git commit -m 'project initialized'   
git push

这时候，我们打开码云的仓库：

这样做的好处就是，一旦本地仓库里的文件代码丢失，我们也可以从线上找回。