Vue CLI 脚手架2

1.什么是CLI?

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

2.什么是Vue CLI

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

3.Vue CLI 优势

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

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

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

  • 可升级; 一条命令

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

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

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

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

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

4.Vue CLI 安装

4.1环境准备

#1.下载node.js
    http://nodejs.cn/download/
        windows系统： .msi  安装包(exe)指定安装位置  .zip(压缩包)直接解压缩指定目录
#2.配置nodejs 环境变量
windows系统：
    1.计算机上右键属性----->  高级属性  ----->环境变量  添加如下配置:
        NODE_HOME = nodejs安装目录
        PATH = %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
查看安装好的路径：
    npm config ls
#6.配置npm下载依赖位置
windows:
    npm config set cache "C:\Users\fuyiliang\nodereps"
    npm config set prefix "C:\Users\fuyiliang\nodereps"
mac os:
    npm config set cache "C:\Users\fuyiliang\nodereps"
    npm config set prefix "C:\Users\fuyiliang\nodereps"
    
#7.验证nodejs环境配置
    npm config ls
        ; "user" config from C:\Users\fuyiliang\.npmrc
        cache = "C:\\Users\\fuyiliang\\nodereps"
        prefix = "C:\\Users\\fuyiliang\\nodereps"
        registry = "https://registry.npm.taobao.org/"

4.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.查看安装好的脚手架
    npm -version
    
    npm run dev //3.2x版本vite

4.3第一个vue脚手架项目

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

路由：

    redirect:重定向到主页
        {path:'/',redirect:'/home'}
    children:子路由
        children:[{path:'add',component:UserAdd}]

4.4如何开发Vue脚手架

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

5.在脚手架中使用axios

5.1安装axios

clear//清空
#1.安装axios
    npm insrall 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)=>{})

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

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