详细说明如何使用vue-cli脚手架构建Vue.js项目

1.前言

构建Vue.js项目的简单命令行界面

整个过程：

$ npminstall-gvue-CLI $ vueinit web pack vue-admin $ cdvue-admin $ npminstall $ NPM run dev。

2.装置

前提是Node.js=4.x版本4.x，推荐6.x版本。Npm版本3.x

vue-cli的全球安装

$ NPM install-g vue-CLI

3.使用

$ vue init template-name project-name vue正式提供了几个打包工具版本的模板。我们可以使用vue list命令来查看目前可以使用的模板。

$ vue列表

这里，我们使用webpack模板。功能齐全的webpack vue加载器提供热加载、代码检查、单元测试和css分离

$ vue init webpack vue-element-admin

然后，在e: \ project文件夹下，会有新初始化的建筑项目vue-element-admin

4.操作结果

项目基础设施已经搭建好了，现在就开始吧。

输入项目文件：

$ cd vue-element-admin安装依赖项：

由于中国的市场情况，直接安装有时会失败。我们一般用的是npm的淘宝镜像Cnpm。

要首先安装cnpm:

在$ npminstall-gcnpm-registry=https://registry.npm.taobao.org之后，使用：

$ cnpm安装您可以直接安装它：

$ npm安装运行：

$ npm运行开发

启动后自动打开默认浏览器

之后可以在本地开发，实时预览开发效果。

5.包部署

项目开发完成后，您可以使用npm运行构建进行打包

打包$ npm运行版本后，将生成dist文件夹。当项目上线时，只需将dist文件夹放在服务器上。

6.项目结构