使用Vue-cli从头搭建Vue项目

使用Vue-cli脚手架搭建项目

1. 安装vue-cli

打开cmd，输入命令

npm install --global vue-cli

2. 创建项目

在项目工作空间，打开cmd输入命令：

vue init webpack creative (creative为创建的项目名称)

接下来终端会出现一些问题，可以选择直接回车，对项目没有什么影响。
全部回车之后项目就生成了，目录结构如下：

3. 目录说明

1. build文件夹：
这个文件夹主要是对webpack的一些配置，常用的是 webpack.base.conf.js（基本webpack配置）、webpack.dev.conf.js（开发环境配置）、webpack.prod.conf.js（生产环境配置）。这些文件中一些简单的配置都有了，我们只需要根据自己的项目还需要什么loader，自行配置。
2. config文件夹：
配置文件，执行文件需要的配置信息。
3. src文件夹：

资源文件，是整个项目中使用频率最高的文件夹。
assets：资源文件夹，存放共同的样式、图片等
components：组件文件夹，编写的所有组件都在这个文件夹下
router：路由文件夹，设置路由
App.vue： vue文件入口
main.js：对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置
4. static文件夹：
存放的文件不会经过webpack处理，可以直接引用

4. 运行项目

输入命令：

npm run dev

浏览器中输入 http://localhost:8080，即可启动项目，看到如下页面表示项目已经搭建完成。