[b]1. 前言[/b] [code]vue-cli[/code] 一个简单的构建[code]Vue.js[/code]项目的命令行界面 整体过程： 后面分步说明。 [b]2. 安装[/b] 前提条件，Node.js >=4.x版本，建议使用6.x版本。npm版本 > 3.x 全局安装vue-cli [img]http://files.jb51.net/file_images/article/201705/201705190703491.png[/img] [img]http://files.jb51.net/file_images/article/201705/201705190703492.png[/img] [b]3. 使用[/b] vue官方提供了多个打包工具版本的模版。我们可以使用[code]vue list[/code]命令查看，当前可以使用的模版。 [img]http://files.jb51.net/file_images/article/201705/201705190703493.png[/img] 我们在这里，使用webpack模版。 功能齐全的webpack & vue-loader 提供热加载、代码检查、单元测试和css分离 [img]http://files.jb51.net/file_images/article/201705/201705190703494.png[/img] 之后，在[code]E：\project[/code]文件夹下面，会有刚初始化的构建的项目[code]vue-element-admin[/code] [img]http://files.jb51.net/file_images/article/201705/201705190703495.png[/img] [b]4. 运行结果[/b] 项目基础结构已经搭建好了，现在来启动它。 进入项目文件: 安装依赖： 中国行情原因，直接安装，有时候会失败。我们一般使用npm的淘宝镜像cnpm。 先安装cnpm： 之后，使用: 你直接安装也可以的： 运行： [img]http://files.jb51.net/file_images/article/201705/201705190703496.png[/img] 启动之后，自动打开默认浏览器 [img]http://files.jb51.net/file_images/article/201705/201705190703497.png[/img] 之后，就可以进行本地开发，实时预览开发效果。 [b]5. 打包部署[/b] 项目开发完成之后，可以使用[code]npm run build[/code]进行打包工作 打包完成之后，会生成[code]dist[/code]文件夹，项目上线时候，只需要将[code]dist[/code]文件夹放到服务器就行了。 [b]6. 项目结构[/b] [img]http://files.jb51.net/file_images/article/201705/201705190703498.png[/img]