Vue实战之Vue CLI 脚手架

Vue CLI 脚手架

14.1 什么是CLI

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

14.2 什么是Vue CLI

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

14.3 Vue CLI优势

• 通过 vue-cli 搭建交互式的项目脚手架。bootstrap css js jquery js 通过执行命令方式下载相关依赖

• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发 vue页面 vuejs vuerouter axios(一条命令)

• 一个运行时依赖 (@vue/cli-service)，该依赖：

  • 可升级； 一条命令

  • 基于 webpack 构建，并带有合理的默认配置； webpack 项目打包方式 编译好的项目源码===>部署到服务器上直接使用

  • 可以通过项目内的配置文件进行配置； 默认配置文件,通过修改默认配置文件达到自己想要的项目环境

  • 可以通过插件进行扩展。 vue v-charts elementui

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。Nodejs(tomcat) Vue VueRouter webpack yarn

• 一套完全图形化的创建和管理 Vue.js 项目的用户界面

14.4 Vue CLI安装

1. 环境准备

#1.下载nodejs
        http://nodejs.cn/download/
            windows系统:   .msi  安装包(exe)指定安装位置   .zip(压缩包)直接解压缩指定目录
          mac os 系统:   .pkg  安装包格式自动配置环境变量  .tar.gz(压缩包)解压缩安装到指定名
​
#2.配置nodejs环境变量
    windows系统:
        1.计算上右键属性---->  高级属性 ---->环境变量 添加如下配置:
                NODE_HOME=  nodejs安装目录
        PATH    = xxxx;%NODE_HOME%
    2.macos 系统
            推荐使用.pkg安装直接配置node环境
 
#3.验证nodejs环境是否成功
        node -v 
        
#4.npm介绍
        node package mangager    nodejs包管理工具       前端主流技术  npm 进行统一管理
            maven 管理java后端依赖   远程仓库(中心仓库)      阿里云镜像
            npm   管理前端系统依赖    远程仓库(中心仓库)      配置淘宝镜像
        
#5.配置淘宝镜像
      npm config set registry https://registry.npm.taobao.org
      npm config get registry
​
#6.配置npm下载依赖位置
     windows:
        npm config set cache "D:\nodereps\npm-cache"
        npm config set prefix "D:\nodereps\npm_global"
     mac os:
        npm config set cache "/Users/chenyannan/dev/nodereps"
        npm config set prefix "/Users/chenyannan/dev/nodereps"
​
#7.验证nodejs环境配置
    npm config ls
    
    ; userconfig /Users/chenyannan/.npmrc
    cache = "/Users/chenyannan/dev/nodereps"
    prefix = "/Users/chenyannan/dev/nodereps"
    registry = "https://registry.npm.taobao.org/"

​

2.安装脚手架

#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
​

3.第一个vue脚手架项目

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

4.如何开发Vue脚手架

注意:在Vue cli 中一切皆组件

---

15.在脚手架中使用axios

15.1 安装axios

# 1.安装axios
    npm install axios --save-dev
​
# 2.配置main.js中引入axios
    import axios from 'axios';
​
    Vue.prototype.$http=axios;
​
# 3.使用axios
    在需要发送异步请求的位置:this.$http.get("url").then((res)=>{}) this.$http.post("url").then((res)=>{})

---

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

# 1.在项目根目录中执行如下命令:
      vue run build
​
        注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行
​
# 2.打包之后当前项目中变化
        在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录
# 3.在dist目录中idnex.html中需要映入的资源文件需要重新更改路径在进行启动
​