vue-cli脚手架工具

我们后端使用maven（一款IDE）来创建项目，有两个目的，一是通过maven的依赖机制，能够快速的管理依赖。二是通过maven来确定项目的结构，所谓项目的结构就是项目里有哪些文件和文件夹，文件夹是一个怎样的层级关系。

问题来了？ 一个Vue项目里的项目结构应该是什么样的？  我们能不能快速的获得这样的项目结构呢？

可以通过vue-cli这种脚手架工具来解决这样的问题。Vue-cli里存放了很多常用的项目骨架，直接拿来用就可以搭建出一个拥有比较成熟的项目结构的项目。

 

1.安装node.js

要想使用vue-cli,得先安装node.js

node.js是一个可以让前端运行在node.js提供的服务器上一个工具，换句话说，就是提供了一个服务器。官网下载即可：http://nodejs.cn/download/

测试node.js是否安装成功：cmd中输入命令：node  -v 查看版本，如果看到版本，就表示安装成功。

 

2.使用node.js 安装vue-cli

在cmd使用命令：

       npm install vue-cli –g

           npm:是指明使用node.js的命令

           install:安装

           vue-cli:要安装的工具

           -g：全局安装

       淘宝镜像安装方式：

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

   3.使用vue-cli下载项目骨架搭建我们的项目

     使用以下命令可以列出当前官方提供的骨架，可以使用这些骨架来搭建我们的项目

vue list

 

 

 

使用命令来搭建项目骨架

vue  init    骨架名         项目名

vue  init    webpack-simple  myvuedemo

 

使用命令后当前路径下就会生成一个myvuedemo的文件夹，里面存放着webpack-simple

骨架应该有的文件（下载过来的）

 

 

4.安装项目依赖  --npm install

当使用命令下载完项目文件以后，也需要跟maven工程一样，去下载依赖的jar包。

vue需要通过npm  install命令下载依赖

 

5.使用开发模式来运行项目

  使用命令：  npm run dev

  就能在浏览器中：http://localhost:8081/  看到当前项目的首页