vue-cli 安装配置及简介

介绍

什么是CLI

命令行界面（英语：Command-Line Interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（character user interface, CUI）,与之对应还有图形化界面 GUI

什么是Vue-Cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,用手脚架开发后可得到一个完整的系统(项目)

Vue-Cli优势

1. vue-cli搭建交互式的项目脚手架。（相当于后端的SpringBoot手脚架）
2. 快速开始零配置原型开发。
3.一个运行时依赖，该依赖：
    ·可升级(便于版本控制)
    ·基于 webpack 构建，并带有合理的默认配置 (前端最火的打包方式，类似于 jar war包)
    ·可以通过项目内的配置文件进行配置
    ·可以通过插件进行扩展
4.一个丰富的官方插件集合，集成了前端生态中最好的工具。（相当于spring全家桶）
5.一套完全图形化的创建和管理 Vue.js 项目的用户界面。

安装

安装 Node.js

• 安装 Node.js(js写的前端服务器相当于后端的Tomcat)
  
  node.js 的中文官方下载地址
• 然后就是傻瓜是安装，一直下一步
• 检验是否安装成功
  
• 终端输入 node -v

• 新版Node.js自带npm (依赖管理工具相当于Maven，也可以用来下载安装别的工具)
• 终端输入npm -v查看版本

• 可进行环境配置(npm下载的路径及node环境配置)Node.js配置详情

安装 Vue-cli

1.先安装淘宝镜像，下载速度更快
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.终端输入 npm install -g @vue/cli安装3版本
npm install -g vue-cli安装2版本(我用的2)
二选一
3.检验安装是否成功
vue -V(注意是大写-V)

创建Vue-cli项目

vue init webpack helloword
然后就疯狂回车

看到就finished就完成了

运行及目录简介

运行

终端先进入项目根目录，才能运行

然后vue-cli手脚架初始化就完成了

目录结构

    ├─build                 // 保存一些webpack的初始化配置,项目构建
    │ ├─build.js            // 生产环境构建
    │ ├─check-version.js    // 检查npm、node版本
    │ ├─vue-loader.conf.js  // webpack loader配置
    │ ├─webpack.base.conf.js// webpack基础配置
    │ ├─webpack.dev.conf.js // 开发环境配置，构建本地开发服务器
    │ ├─webpack.prod.conf.js// 生产环境的配置
    │
    ├─config                // config文件夹保存一些项目初始化的配置
    │ ├─dev.env.js          // 开发环境的配置
    │ ├─index.js            // 项目一些配置变量
    │ ├─prod.env.js         // 生产环境的配置
    │
    ├─dist                  // 打包后的项目
    ├─node_modules          // 依赖包
    │
    ├─src                   // 源码目录
    │ ├─assets              // 静态文件目录
    │ ├─components          // 组件文件
    │ ├─router              // 路由
    │ ├─App.vue             // 是项目入口文件
    │ ├─main.js             // 是项目的核心文件，入口
    ├─static                // 静态资源目录 
    ├─.babelrc              // Babel的配置文件
    ├─.editorconfig         // 代码规范配置文件
    ├─.gitignore            // git忽略配置文件
    ├─.postcssrc.js         // postcss插件配置文件
    ├─index.html            // 页面入口文件
    ├─package-lock.json     // 项目包管控文件
    ├─package.json          // 项目配置
    └─README.md             // 项目说明书

vue目录可能会对小白不友善，但是学到后面就简单点了，祝大家早日成为大牛! ! !