Vue-cli

安装Vue-cli:
使用全局安装vue-cli；在cmd中输入一下命令

npm install -g vue-cli

使用图形化界面：vue ui

创建项目: mydemo

vue init webpack mydemo

PS:项目名字不能有大写字母。

创建项目详情：
Project name (vuetest)
项目名称，可以自己指定，也可直接回车，按照括号中默认名字。
Project description (A Vue.js project)
项目描述，也可直接点击回车，使用默认名字。
Author作者，可以自己指定，也可直接回车。
接下来会让用户选择Runtime + Compiler: recommended for most users 运行加编译，
既然已经说了推荐，就选它了Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅运行时，已经有推荐了就选择第一个了Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行。Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试。Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试。

使用编辑器打开项目：目录结构如下所示

目录介绍:
bulid
里面是一些操作文件，使用npm run * 时其实执行的就是这里的文件。
config配置文件，执行文件需要的配置信息。
src 资源文件，所有的组件以及所用的图片都是在这个文件夹下放着。简单看一下这个文件夹下都放了哪些东西。assets 资源文件夹，放图片之类的资源，
components 组件文件夹，写的所有组件都放在这个文件夹下，
router 路由文件夹，这个决定了页面的跳转规则，
App.vue应用组件，所有自己写的组件，都是在这个组件之上运行了。
main.js webpack入口文件。

安装模块:

npm install

它根据package.json的配置表进行安装，安装完后会在mydemo下多一个文件夹node_modules，这里的文件对应着package.json里的配置信息。
PS:如果端口号冲突可以在config下的index.js中修改端口号。如下所示

运行demo：

npm run dev

在浏览器中访问http://localhost:port 如果出现以下页面则说明成功。
port为配置的端口号