Vue脚手架构建项目目录

一.Vue CLI简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，
Vue CLI脚手架如何构建一个项目呢？

二.node.js安装

安装node.js,使用node.js的npm 安装各种资源包,方便模块化管理。
在http://nodejs.cn/download/中下载node，安装完成后在命令行在输入node -v检查是否安装成功

执行结果显示:版本号(node有更新版本号可能不同),则安装成功,
如果 执行结果显示： xx 不是内部命令，说明你还没有安装node。

三.安装脚手架包(@vue/cli)

1,使用npm安装
在命令行中输入 npm install @vue/cli -g 全局安装脚手架
安装完成之后在命令行中输入vue --version 查看是否安装成功

2.使用cnpm安装
由于npm服务器在国外,所以经常造成安装失败和丢包等问题,所以推荐使用国内的淘宝镜像(cnpm)安装,
在命令行中输入 npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成之后在命令行中输入：cnpm --version 查看是否安装失败

之后便可以使用cnpm替代npm执行环境依赖包的各种操作
cnpm install @vue/cli -g 全局安装脚手架

等待完成之后,在命令行中输入：vue --version 查看是否安装成功
这样就准备好了执行环境

三.使用脚手架构建一个项目

1.创建项目文件夹：
在命令行中输入: vue create 项目目录文件夹名 完成一个脚手架创建的环境目录

执行完命令后所在目录便生成了一个vue-study(随便命名)目录

2.项目结构介绍::
基础的结构如下：
node_modules:npm(cnpm)下载项目环境的各种依赖包
public:静态文件
src:源码目录
assets:图片资源等
components:vue公用组件
App.vue:页面入口文件
main.js:程序入口文件，加载各种公共组件
package.json:项目配置文件
README.md:项目的说明文件。

3.项目本地服务器执行:
进入vue-study 在命令行中输入 cd vue-study(继续执行上面步骤的相对目录)
在命令行在输入 npm run serve


正常输入命令，出现上图就在本地服务器三运行了项目,
可以在浏览器中输入 :http://localhost:8080/ 访问

访问出现上述页面就是大功告成了。
查看项目目录中的文件等需要更深入的了解和配置等。Vue 和 Vue-Router 和 Vuex参考学习