vue Cli 脚手架的搭建

一、安装 node.js  应用

安装完以后测试是否安装成功，如图：

二、全局安装 vue - cli

输入命令符： npm install --global vue-cli

测试是否安装成功，成功如图：

三、选择须要安装到盘和文件夹，如图：E:\vue

四、开始建立文件，并取文件名为 vue-cli-study，并按本身需求选择

四、运行项目

 进入建立的文件夹，而后 npm run dev 开始运行项目，如图：

 

另外记录下 文件的目录分别是作什么用的，转自 http://blog.csdn.net/webxiaoma/article/details/73650810?locationNum=4&fps=1 

一级目录
build: webpack 配置相关的目录
config: webpack 配置相关的目录
node_modules: npm install 安装的依赖代码库
src：咱们存放的源码，咱们开发的所哟代码都放在src目录下。
staic: 存放一些第三方静态资源的目录
test:测试目录，没有太大用处，能够删除

一级文件：
.babelrc: babel的一些配置，（将es6编译成es5的一些配置）
.editorconfig:编辑器的一些配置（包括编码格式，缩进风格，换行格式）
.eslintignore：配置咱们不会对build文件和config文件进行语法检查。
.eslintrc.js： eslint的配置文件，主要是定义一些代码编写风格的规则。
.gitignore：配置git仓库忽略的一些文件（不会上传）
index.html： 入口html 文件。
package.json：项目的一些配置信息（项目的一些具体信息）

src 文件夹下的 目录：

assets 文件夹： 存放静态资源，例如：图片，font字体等。
conponents 文件夹： 存放组件，里面你能够在建文件来分组件，好比建 header 问价夹， footer 文件夹
router 文件夹： 配置路由文件
App.vue 文件： App.vue是咱们的主组件，全部页面都是在App.vue下进行切换的
main.js 文件： 主要做用是初始化vue实例并使用须要的插件

由于我么主要是在src下进行开发，全部这些文件名不是必须，你能够根据您的项目需求去增长，或删除。不过 app.vue 文件和 main.js 文件 必需要有的。