Vue-CLI | zKing的学习乐园

摘要

Vue-CLI 是 Vue 官方提供的脚手架工具，在真正的开发中，并不会单引入 Vue 就可以开始编写代码，而是使用工程化的方式进行开发。而 Vue-CLI 为开发过程提供了极大的便利。尽管 Vue-CLI 已经更新到了 3x，但是这里还是以 2x 来进行示例，献上 GitHub 地址

# 使用

# 安装

cnpm install -g vue-cli
vue init webpack vue-project

# 配置

? Project name vue-project
? Project description A Vue.js project
? Author H-zk <1422144134@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "vue-project".

# Project initialization finished!
# ========================

To get started:

  cd vue-project
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

上述的配置，选择安装了 vue，vue-router，eslint。

# 目录结构

执行以下命令，即可下载好 Vue-CLI 搭建的模板文件。

cd vue-project
cnpm run install

可以看下已经下载好的目录结构

vue-project
├─.babelrc --------------------------- babel 的配置文件
├─.editorconfig ---------------------- 编辑器 配置
├─.eslintignore ---------------------- eslint 对文件的忽略配置
├─.eslintrc.js ----------------------- eslint 的配置文件
├─.gitignore ------------------------- git 对文件的忽略配置
├─.postcssrc.js ---------------------- postcss 的配置文件
├─index.html ------------------------- 访问的页面
├─package.json ----------------------- 关于项目基本信息，包信息等
├─README.md -------------------------- 项目说明文档
├─static ----------------------------- 放置静态文件
|   └.gitkeep ------------------------ 用于在仓库中保留空目录
├─src--------------------------------- 源码目录
|  ├─App.vue ------------------------- 页面入口文件
|  ├─main.js ------------------------- 程序入口文件
|  ├─router -------------------------- 路由目录
|  |   └index.js
|  ├─components----------------------- 组件目录
|  |     └HelloWorld.vue
|  ├─assets -------------------------- 资源目录
|  |   └logo.png
├─config ---------------------------- 项目开发环境配置
|   ├─dev.env.js
|   ├─index.js
|   └prod.env.js
├─build------------------------------ 项目构建(webpack)相关代码
|   ├─build.js
|   ├─check-versions.js
|   ├─logo.png
|   ├─utils.js ---------------------- 构建工具相关
|   ├─vue-loader.conf.js
|   ├─webpack.base.conf.js
|   ├─webpack.dev.conf.js
|   ├─webpack.prod.conf.js
|   └webpack.test.conf.js

最后，使用 npm run dev来启动项目即可。

# 结语

之后，将结合之前的知识点，使用 Vue-CLI，Vue-Router，Vuex 来简单实现一个 Vue-Todo 的项目