Vue脚手架的使用

Vue CLI 脚手架

什么是CLI

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

什么是Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue脚手架之后我们开发的页面将是一个完整系统(项目)。

Vue CLI 优势

通过 @vue/cli 实现的交互式的项目脚手架。bootstrap css js jquery 通过执行命令的方式下载相关的依赖
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
  
  webpack 项目打包方式编译好的项目源码=====>部署到服务器上直接使用
- 可以通过项目内的配置文件进行配置；
  
  默认配置文件，通过修改默认配置文件达到自己想要的项目环境
- 可以通过插件进行扩展。
  
  vue v-charts elementui
一个丰富的官方插件集合，集成了前端生态中最好的工具。 Nodejs Vue VurRouter yam
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 安装

环境准备

# 1.下载node.js
    http://nodejs.cn/download/
    windows系统:  .msi 安装包(exe)   .zip(压缩包)直接解压缩指定目录
    
# 2.配置nodejs环境变量
    woindow系统
    1. 计算机右键属性-----高级属性-------环境变量
       NODE_HOME = nodejs安装目录
       PATH = xxx;%NODE_HOME%/bin
       
# 3.验证nodejs
    node -v
    
# 4.npm介绍
    node package manager  nodejs包管理工具  前端主流技术 npm进行统一管理
    maven 管理java后端依赖    远程仓库(中心仓库)    阿里云镜像
    npm   管理前端系统依赖     远程仓库(中心仓库)    配置淘宝镜像

# 5.配置淘宝镜像
 npm config set registry https://registry.npm.taobao.org
 npm config get registry
 
# 6.配置npm下载依赖位置
npm set cache D:\npm\nodejs\node_cache
npm set prefix D:\npm\nodejs\node_global

# 7.验证nodejs环境配置
; userconfig C:\Users\17\.npmrc
registry = "https://registry.npm.taobao.org/"

; builtin config undefined
prefix = "C:\\Users\\17\\AppData\\Roaming\\npm"

; node bin location = D:\Program Files\nodejs\node.exe
; cwd = C:\Users\17
; HOME = C:\Users\17
; "npm config ls -l" to show all defaults.

安装脚手架

# 0.卸载脚手架
npm uninstall -g @vue/cli   //卸载3.x版本脚手架
npm uninstall -g vue/cli   //卸载2.x版本脚手架
# 1. Vue Cli官方网站
https://cli.vuejs.org/zh/guide/
# 2. 安装vue Cli
npm install -g vue/cli

第一个vue脚手架项目

# 1. 创建vue脚手架第一个项目
 vue init webpack 项目名
# 2. 创建第一个项目
 hello----------------->项目名
    -build           ----------> 用来使用webpack打包使用build依赖  
    -config          ----------> 用来做整个项目配置目录
    -node_modules    ----------> 用来管理项目中使用依赖
    -src             ----------> 书写vue源代码
        App.vue              ---------->  项目中根组件 
        assets               ----------> 用来存放静态资源
        components           ----------> 用来书写Vue组件
        main.js              ----------> 项目中主入口
        router               ----------> 用来配置项目中路由
    -static          ---------->其他静态
    -.babelrc       -----------> 将es6语法转为es5运行
    -.editorconfig  -----------> 项目编辑配置
    -.gitignore     -----------> git版本控制忽略文件
    -.postcssrc.js  -----------> 源码相关js
    -index.html      ----------> 项目主页
    -package.json    ----------> 类似与pom.xml 依赖管理
    -README.md       ----------> 项目阅读文件
# 3. 如何运行
在项目的根目录中运行
npm start //运行前端系统
# 4. 如何访问项目
http://localhost:8080
# 5. Vue CLI中项目开发方式
注意：一切皆组件  一个组件中  js代码 html代码 css样式
    1. Vue Cli开发方式是在项目中开发一个一个组件对应一个一个业务功能，日后可以将多个组件组合到一起形成一个前端系统
    2. 日后在使用vue Cli进行开发时不再书写html，编写的是一个组件(后缀是.vue结尾的文件)，日后打包时vue CLI会将组件编译成运行的html文件

4. 如何开发Vue脚手架

注意：在Vue CLI中一切皆组件

在脚手架中使用axios

安装axios

# 1. 安装axios
npm install axios --save-dev
# 2. 配置
import axios from 'axios';
Vue.prototype.$http=axios;//修改内部的$http为axios
# 3. 使用axios
在需要发送异步请求的位置:
this.$http.get('url').then(res)=>() 
this.$http.post('url').then(res) =>()

Vue Cli 脚手架项目打包和部署

# 1. 在项目的根目录中执行如下命令
  npm run build
  注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行
# 2. 打包之后当前项目中的变化
  在打包之后项目中出现dist目录，dist目录就是vue脚手架项目生产目录或者说直接部署目录