使用Vue-cli下载一个以webpack打包的vue模板

如今vue.js热度不减，利用vue-cli和webpack可以非常便捷的搭建一个开发环境，以下列出利用vue-cli搭建一个vue.js模板的过程：

1：安装vue-cli

安装vue-cli前系统必须先装有node.js，我们将通过npm来进行环境搭建和依赖加载；本文将介绍window开发环境下的操作，mac系统下大同小异，在操作时需要加入权限sudo即可。

打开cmd，输入node -v查看当前node版本号。如果显示– ‘node’ 不是内部或外部命令，也不是可运行的程序

或批处理文件。

说明系统未装有node，请下载并安装（http://nodejs.cn/download/），下载安装后再cmd查看node -v以及npm -v均会有相应的版本信息。此时node环境准备完毕。



2：下载vue-cli脚手架工具

关于vue-cli：

Vue-cli是vue官方提供的一个命令行工具（vue-cli），可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

执行命令：npm install -g vue-cli 全局安装vue-cli脚手架工具

安装完毕有会得到一大堆目录，先不用理会！看到以下画面说明安成。

。

此时执行vue会得到相息

Commands:

init        generate a new project from a template
list        list available official templates
build       prototype a new project
help [cmd]  display help for [cmd]

Options:

-h, --help     output usage information
-V, --version  output the version number

3：下载模板

C:\Users\hauyi>vue init webpack first_project

‘git’ ——-这里最好先在电脑装有git

? Project name first_project //项目名称

? Project description A Vue.js project //项目描述

? Author hau5yi //项目作者，如有git则会自动关联

? Vue build standalone

? Install vue-router? No //是否使用vue_router

? Use ESLint to lint your code? Yes //esLint的语法检测（ES6）

? Pick an ESLint preset Standard

? Setup unit tests with Karma + Mocha? No

? Setup e2e tests with Nightwatch? No

vue-cli · Generated “first_project”.

To get started:

cd first_project
npm install
npm run dev

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

看到以上提示，表示项目已经创建完毕，vue-cli非常友好的提示我们下一步应该如何操作，首先打开项目，然后下载依赖再运行项目，我们跟着提示操作完成这三个步骤即可搭建起一个基础模板。

4：下载依赖并运行

cd first_project    //打开项目

npm install&nbs
a414
p;        //下载依赖
下载依赖完毕之后，会出现很多目录，这些都是项目总用到的依赖项，我们可以通过dir查看当前文件夹，会发现多出了一个 node_modules文件夹，这里就是存放依赖项的地方
npm run dev      //运行项目

到这里，可以看到电脑8080端口已经运行起来了这个项目，可以看到hellovue界面已经出现了，模板就创建完成了，浏览器打开localhost:8080即即可查看当前项目。