先给项目去创建一个远程仓库 .. 这里我用的是 Github .. 新建一个 Repository .. 名字是 vue-notes-example . 再添加一小段描述 .. Vue.js 范例项目 ..

添加一个 README.md 说明文档 ..

再给项目选择一个 .gitignore 文件 .. 类型可以是 Node .. 添加一个许可协议 .. 选择 MIT .. 然后创建这个仓库 ..

clone and download .. 选择 ssh 类型的仓库地址 ..

打开命令行工具 .. 进入到桌面上 .. 然后克隆一下刚才我们创建的项目 .... 进入到这个目录的下面 .. 用编辑器打开这个目录 ..

然后创建一个 html 文件 .. 安装了 emmet 插件以后，可能输入一个叹号 .. 再展开这个缩写 .. 这样会得到一个基本的 html 文档结构 .. 修改一下页面的标题 ..

我们可以直接在这个文档里面链接在 cdn 上的一些资源 .. 这个应用我打算用一下 semantic-ui 这套框架里的样式 .. 链接一个 css 样式表 .. https://unpkg.com/semantic-ui/dist/semantic.min.css

自定义的样式可以放在 style.css 里面 ... 再去创建一下这个 css 样式文件 .. 名字是 style.css

然后在页面上嵌入一个 vue，因为我们要创建一个 Vue 应用 .. https://unpkg.com/vue

再嵌入一个 lokijs .. 它可以帮我们在前端处理数据的存储还有获取 .. https://unpkg.com/lokijs

lokijs 数据库需要配置一下，单独去给它添加一个 js 文件 .. 名字是 db.js .. 然后在页面上嵌入这个 js 文件 ..

应用的脚本我们都把它放在一个自定义的 js 文件里面 .. 名字可以是 app.js .. 在页面上再嵌入这个 app.js ...

本地服务器

我们可以再去给项目创建一个本地的服务器 .. 回到命令行 .. 这里我要使用 browser-sync 去创建这个服务器，没有这个工具，可以先用 npm 或者 yarn 去安装一下 ..

创建一个 package.json 文件 .. yarn init -y

安装一下 browser-sync .. 保存在项目的开发依赖里 ..

完成以后，打开项目的 package.json .. 添加一个 scripts 属性，里面添加一个 start ，对应的要执行的命令可以是

browser-sync start --server --no-notify --files='index.html, *.css, *.js'

回到命令行 .. 在项目的下面，执行一下 yarn start ..

这样会自动在浏览器上打开项目 .. 编辑并且保存项目的文件以后，浏览器会自动刷新 ..

提交

下面去做一次提交 .. git status .. 查看一下状态 ... git add . 添加所有的修改 ... git commit 提交一下 .. 输入一条信息 .. 准备 Vue 范例项目

然后把提交 push 到远程 .. git push origin master

完成以后回到项目的远程仓库页面 .. 刷新一下 ... 这里会出现刚才我 push 上来的对项目做的修改 ..