vue-cli is an official publication vue.js project scaffolding, using vue-cli can quickly create vue project. This article will be from the perspective of practical operation, introduce the entire building process.
1. Introduction avoid the pit
In fact, this time using vue-cli process is not successful, try again several times this encounter the following error:
Error when creating vue-cli project
Internet search a lot of information I realized that node version of the problem of excessively low, although the official explanation for this "low" the problem is not found, but according to foreign friends rule of thumb, you should use at least node6, I will update node4 after node8 really not being given to the smooth set up. Related Posts Q & A: https://github.com/vuejs/vue-cli/issues/618
Confirm that the version of the node and npm
Will say this up front before we hope to build, should make sure to update the node 6 above, this can take some detours. Here we began formally introduced throughout the build process.
2. Use vue-cli building project
Here the whole process is based on the foundation already installed on node.js and cnpm, node.js detail how to install not here to say. How to globalized install cnpm, brief mention here:
npm install cnpm -g --registry=https://registry.npm.taobao.org
In fact, for installation vue-cli, using npm command and cnpm commands are possible, personally feel that the use of npm install more slowly, and is likely due to network problems and mistakes, I still feel a little use cnpm stable.
(1) global installation vue-cli, command prompt window to perform:
cnpm install -g vue-cli
Installation vue-cli
Prompt appears above represent vue-cli properly installed, you can create a formal vue-cli engineering project.
(2) Installation vue-cli success by cd into the folder you want to place the project in the command prompt window, execute the command to create vue-cli project:
vue init webpack
Creating vue-cli project
After confirming create the project, follow-up about the need to enter the project name, project description, author, packaging, if they use ESLint specification code, etc., see the map. After the successful implementation of the installation will generate a file directory as follows:
Generate a file directory
(3) generating a file directory, using the installation-dependent cnpm:
cnpm install
Installation depends
（4）最后需要执行命令： npm run dev 来启动项目，启动完成后会自动弹出默认网页：
启动项目
启动项目
默认网页
到这一步，就算成功利用vue-cli搭建一个vue项目了，撒花 ~
3.目录结构及其对应作用
通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：
├── build/ # webpack 编译任务配置文件: 开发环境与生产环境
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├ ── node_module/ #项目中安装的依赖模块
── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 资源文件夹，一般放一些静态资源文件
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .gitignore # 用来过滤一些版本控制的文件，比如node_modules文件夹
├── index.html # index.html 入口模板文件
└── package.json # 项目文件，记载着一些命令和依赖还有简要的项目描述信息
└── README.md #介绍自己这个项目的，可参照github上star多的项目。
build/