使用vue-cli创建项目

1.执行命令创建项目。

vue init webpack-simple demo4

2.回答vue-cli的问题。

? Project name demo4
? Project description A Vue.js project
? Author Hu, Yuping <huyp@yxt.com>
? License MIT
? Use sass? No

3.vue-cli会创建文件夹，并打印提示命令。

vue-cli · Generated "demo4".

   To get started:
   
     cd demo4
     npm install
     npm run dev

其中第一条命令的可以提供不同的模版。命令全称如下:

vue init <template-name> <project-name>

具体解释如下:

init：表示我要用vue-cli来初始化项目

<template-name>：表示模板名称，vue-cli官方为我们提供了5种模板，

webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。

webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。

browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。

simple-一个最简单的单页应用模板。

<project-name>：标识项目名称，这个你可以根据自己的项目来起名字。

创建完项目，执行npm run dev，控制台会打印消息，可以预览当前的自动生成的页面。

Hu-YupingdeMacBook-Pro:demo4 kris$ npm run dev

> demo4@1.0.0 dev /Users/kris/Documents/VueDemo/chapter4/demo4
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8081/
webpack output is served from /dist/
404s will fallback to /index.html
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

浏览器中的预览页面如下: