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 template2.开始交互式的创建项目
? 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 YarnNo, I will handle that myself# Installing project dependencies ...
# ========================
接下来开始下来各种依赖，等待即可...added 1273 packages from 675 contributors in 114.144s42 packages are looking for fundingrun `npm fund` for details#以下为成功提示信息
# Project initialization finished!
# ========================To get started:cd vue-cli-testnpm 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}]
})

注：第三部分的全部内容整合成pdf文档，可以进行下载保存

https://download.csdn.net/download/technologist_28/21114086

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

Dockerfile 文件结构、docker镜像构建过程详细介绍
[Docker那些事]系列文章 Dockerfile 文件结构.docker镜像构建过程详细介绍 Dockerfile文件中CMD指令与ENTRYPOINT指令的区别构建Docker镜像指南,含实战 ...
Vue第三部分(2)：Vue-CLI构建前后端分离项目以及打包部署
通过上一节,我们学习了vue脚手架的相关概念以及构建过程,那么开始我们的前后端项目吧 Vue-CLI构建前后端分离项目 1.项目环境初始化 1.安装 axios vue-axios(记得执行命令要进入 ...
Vue（三）使用Vue脚手架
目录一.初始化脚手架 1.1 使用步骤 2.2 模板项目的结构二.ref.props.mixin 2.1 ref属性 2.2 配置项 props 2.3 混入 mixin 三.插件 3.1 功能 ...
三次握手和四次挥手详细介绍
相对于SOCKET开发者,TCP创建过程和链接折除过程是由TCP/IP协议栈自动创建的.因此开发者并不需要控制这个过程.但是对于理解TCP底层运作机制,相当有帮助. 而且对于有网络协议工程师之类笔试, ...
Netty由浅到深_第三章_NIO模型3大组件详细介绍
NIO三大核心原理示意图每个channel(通道)都会对应一个buffer(缓冲区) Selector(选择器)对应一个线程,一个线程对应多个channel(连接) 程序切换到那个channel是由 ...
Vue学习（常用实例、脚手架搭建）-学习笔记
文章目录 Vue学习(常用实例.脚手架搭建)-学习笔记实例1 法1 法2 实例2 脚手架搭建 vue-cli2.0 vue-cli4.0 Vue学习(常用实例.脚手架搭建)-学习笔记附加:阿里巴巴 ...
APK构建过程-命令行编译
官方对APK构建过程的介绍官方 - 构建流程介绍典型 Android 应用模块的构建流程,按照以下常规步骤执行: 编译器将您的源代码转换成 DEX 文件(Dalvik 可执行文件,其中包括在 An ...
VUE 3——3：脚手架构建工具介绍及在创建 Vue 3 项目中的应用
这是针对 Vue 新人的一个简单指导. 在前面的文章中,我们不推荐新手直接使用 vue-cli,(尤其是在还不熟悉基于 node.js 的构建工具时),而是通过直接引用的方式: <script ...
运用 Vue CLI4.X 脚手架构建项目实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. 运用 Vue CLI4.X 脚手架构建项目实战前言一.什么是 Vue CL ...

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