使用 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