vue-cli起项目步骤

一、 安装 node.js

安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

二、安装webpack

             命令：npm install webpack -g

             安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。

三、安装 vue-cli

             命令：npm install -g vue-cli

             安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

             如果提示无法识别 vue，可能是 npm 版本过低，可使用 npm install -g npm 来更新版本

四、使用vue-cli来构建项目

　　1、在硬盘中找一个放项目的文件夹

　　2、在文件夹下打开命令盘，输入命令

　　Vue-Project是我们自己设置的项目名称，项目名称不能用中文

       命令：vue init webpack Vue-Project

3、进入项目工程目录

4、安装项目所需依赖  npm install

5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource

        命令：npm install vue-router vue-resource --save

创建完成的项目目录，如下图

各个目录的作用

最后一步启动项目

         命令：npm run dev

启动成功，打开浏览器8080窗口，页面如图所示

---

关于vue create 和vue init webpack的区别 ？

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

https://www.zhihu.com/question/56615554

https://www.cnblogs.com/ssunshine/p/9454240.html或https://www.jianshu.com/p/1626b8643676

https://www.cnblogs.com/wangweizhang/p/10240175.html

另一种：https://segmentfault.com/a/1190000015680030