使用 vue-cli 搭建项目
vue-cli
vue-cli 是什么及为什么要使用他：
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
注意：
CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。
好啦，经过之前的学习，现在应该也算是对 vue 和 webpack 有了「一定程度的了解」，直接就上手 vue-cli 试试吧~
使用 vue-cli
- 安装 node.js
安装完成后运行 npm install -g cnpm --registry=https://registry.npm.taobao.org 把 npm 镜像替换成淘宝镜像(安装效率更高)
- 全局安装 vue-cli
运行 cnpm install -g vue-cli
- 进入目录–初始化项目
进入项目目录后运行 vue init webpack my-project
vue init webpack vue-cli-project
Project name vue-cli-project // 项目名称
Project description // 项目描述
Author no1harm //项目作者
Vue build standalone // 选择编译运行方式，因为 vue 推荐 Runtime + Compiler，所以直接回车就好了
Install vue-router? No // 是否使用 vue-router，根据项目需要选择
Use ESLint to lint your code? No // 是否使用ESLint管理代码，根据项目需要选择
Set up unit tests No // 是否安装单元测试，根据项目需要选择
Setup e2e tests with Nightwatch? No // 是否安装e2e测试，根据项目需要选择
Should we run `npm install` for you after the project has been created? (recommended) npm // 使用 npm 安装包
然后就会开始创建项目。
看到这里就知道我们已经成功地利用 vue-cli 脚手架创建了一个项目！
这是项目下的文件主目录：
│ .babelrc
│ .editorconfig
│ .gitignore
│ .postcssrc.js
│ index.html
│ package-lock.json
│ package.json
│ README.md
├─build
├─config
├─node_modules
├─src
└─static
对了，我们还需要给项目安装一下依赖。
- 安装项目依赖
运行 cnpm install
- 启动项目
运行 npm run dev
按照指示在浏览器中打开 http://localhost:8081
我们的 vue 项目已经运行成功~！
vue-cli 的目录结构
vue-cli 生成目录结构的分析：
│ .babelrc // ES6语法编译配置
│ .editorconfig // 定义代码格式
│ .gitignore // git上传需要忽略的文件格式
│ .postcssrc.js // postcss 配置文件
│ index.html // 入口页面
│ package-lock.json
│ package.json // 项目基本信息
│ README.md // 项目说明
├─build // 项目构建(webpack)相关代码
│ build.js // 生产环境构建代码
│ check-versions.js // 检查node&npm等版本
│ logo.png
│ utils.js // 构建配置公用工具
│ vue-loader.conf.js // vue加载器
│ webpack.base.conf.js // webpack基础环境配置
│ webpack.dev.conf.js // webpack开发环境配置
│ webpack.prod.conf.js // webpack生产环境配置
├─config // 项目开发环境配置相关代码
│ dev.env.js // 开发环境变量
│ index.js // 项目一些配置变量
│ prod.env.js // 生产环境变量
├─node_modules // 项目依赖的模块
├─src // 源码目录
│ │ App.vue
│ │ main.js
│ ├─assets // 资源目录
│ │ logo.png
│ └─components // vue公共组件
│ HelloWorld.vue
└─static // 静态文件
另外，刚学习到了一个小窍门~
在 window 中(笔者使用「万恶之源」- win10)生成目录树，汗颜我之前还上网查找了挺久，什么关键词 markdown / sourceTree，还以为是 markdown 语法的一种，原来 window 自带的命令 tree 就能实现这个功能。
另外，Linux 中也可以使用 tree 命令，在此就不演示了。
使用 tree 命令生成目录树
tree [Drive:[[Path] [/F] [/A]
其中:
-
/F 表示不仅输出文件夹，也输出文件名。默认是只输出文件夹的名字。
-
/A 表示使用另一种方式来绘制目录树。
可以使用 tree -l 文件名 >README.md
