Vue第三部分(1)：Vue脚手架构建过程详细介绍和案例

本文链接：https://blog.csdn.net/technologist_28/article/details/119703714

Vue-CLI 基本使用

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

Vue-CLI是由Vue提供的一个官方CLI又称Vue脚手架，是一个基于Vue.js进行快速开发的工具，能够自动创建项目必须的项目结构、文件模板和运行环境。

通过 vue-cli 实现的交互式的项目脚手架。
一个运行时依赖 (vue-cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

1.1 Node.js的安装和配置

使用Vue-CLI需要安装Node.js环境。NPM（Node Package Manager）是随同NodeJS一起安装的包管理工具，能够解决开发JavaScript应用时的包管理的需求（类似于Java中的Maven）。

安装Node.js
安装Nodejs ,在官方下载安装包后，双击安装，没有什么特别的步骤。

注意：Node.js的版本更新比较快，不要安装最新版，避免兼容性问题。安装后，在命令行输入 node -v 和 npm -v查看版本号

配置

#设置npm管理的包的存储位置，默认在C盘。避免C盘空间不足，设置到其它位置（保证存在相应目录）
#并将 “D:\nodejs\node_global” 配置到path环境变量中

npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”

#npm 官方源在国内访问很慢，需要使用淘宝的镜像替换npm
npm config set registry https://registry.npm.taobao.org

1.2 安装Vue-CLI脚手架

#安装vue-cli
npm install -g vue-cli
#查看版本
vue --version

第1个脚手架项目

1.选择一个合适的目录，打开cmd，按照如下步骤创建项目

1.#初始化项目 vue init webpack 项目名 
vue init webpack vue-cli-test
#下载模板
- downloading template

2.开始交互式的创建项目
? Project name (vue-cli-test) #确认项目名，回车即可
? Project description (A Vue.js project) #添加项目描述，回车即可
? Author xushy <smarttime@foxmail.com> #确认作者信息，回车
? Vue build (Use arrow keys)
#此处，通过上下键可以选择Runtime+Compiler和Runtime-only，选择第1个即可
> Runtime + Compiler: recommended for most users #回车
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
? Install vue-router? (Y,n) #是否安装vue-router，默认安装，回车
? Use ESLint to lint your code (Y/n) #是否安装ESLint进行代码格式校验，输入n不安装
? Set up unit tests (Y/n)#是否预设单元测试，输入n
? Setup e2e tests with Nightwatch? (Y/n) #是否使用ew2e工具，输入n
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM #回车
  Yes, use Yarn
  No, I will handle that myself
  
# Installing project dependencies ...
# ========================
接下来开始下来各种依赖，等待即可...


added 1273 packages from 675 contributors in 114.144s

42 packages are looking for funding
  run `npm fund` for details

#以下为成功提示信息
# Project initialization finished!
# ========================

To get started:

  cd vue-cli-test
  npm run dev

2.使用idea打开上一步新建的项目
在这里插入图片描述
3.在Idea中安装Vue.js插件，然后重启Idea

2.1 Vue-CLI项目初识

1.Vue-CLI项目结构简析
在这里插入图片描述
2.启动项目

3.访问

Vue-CLI项目探秘

3.1单页面组件

传统的组件的定义示例：

<template id="component-id">
	<p >
        hello {{content}}
    </p>
</template>
<script>
	Vue.component('组件名',{
		el:"#component-id",
        data(){
            return {
                content: "写的好的话一键三连，谢谢"
            }
        }
	})
</script>

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
可读性差，维护难度高多个组件定义在一起，代码显得臃肿复杂

Vue提供了文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法：
这是一个文件名为 Hello.vue 的简单实例：

<template>
	<p >
        hello {{content}}
    </p>
</template>
<script>
    //使用export将组件导出，需要使用组件的文件就可以使用import导入
	export default {
        data(){
            return {
                content: "写的好的话一键三连，谢谢"
            }
        }
    }
</script>
<style scoped>
    p{
        font-size: 2em;
        text-align: center;
    }
</style>

一个 .vue文件就是一个组件，文件名就是组件名（按照规范vue文件名各个单词首字母要大写）。每个 .vue 文件包含三种类型的顶级语言块 < template>、< script> 和 < style>。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。

3.2 运行流程分析

在这里插入图片描述

请求http://localhost:8081/,进入主页面index.html,index.html中引入了main.js的代码
main.js中创建了Vue实例，使用 App组件渲染index.html，并载入了router路由规则
router/index.js中定义了 / 的地址对应的组件为HelloWorld，App组件中的router-view使用HelloWorld渲染

总结：

index.html日后基本不会修改
App.vue作为根组件，定义了页面的基本结构。日后开发时，根据需求修改它
在components中新建 .vue文件来定义组件
在router/index.js中定义路由规则
在main.js中引入项目需要的库

示例演示：
1.componets下新增Hello.vue

<template>
    <p>hello {{content}}</p>
</template>

<script>
    export default {
        name: "Hello",
        data(){
          return{
            content:"写的好的话一键三连，谢谢"
          }
        }
    }
</script>

<style scoped>
  p{
    font-size: 2em;
    text-align: center;
    color: yellow;
  }
</style>

2.router/index.js添加路由配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入Hello组件
import HelloBaizhi from "@/components/Hello";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
      //配置新的路由规则
    {
      path:"/hello",
      name: "Hello",
      component: Hello
    }
  ]
})