VueCli 脚手架使用

 VueCli  脚手架（开发工具或者开发平台）

---

到目前为止，已经会了Vue基本使用（去创建vue实例，创建之后再去挂载，挂载之后就去使用各种功能，挂载之后就可以使用其各种功能，data methods compute 以及各个生命周期，常用的属性以及数据的双向绑定），但这种在HTML引用Vue.js的方式，简单的页面还是没问题的，如果用Vue开发整个前端项目，组建Vue项目结构及配置还是比较复杂的，例如引入各种js文 件、打包上线等。 因此，为了提高开发效率，官方开发了VueCli脚手架快捷搭建开发环境。

写完.vue文件，如果没有脚手架帮你翻译，转换，浏览器是不认识的。vue脚手架版本最新是4.x版本，vue版本最新是3版本。

vue版本和vue脚手架版本关系

vue版本和vue脚手架版本没有关系， 在做开发的时候选择vue的版本，之后选择平台的版本。一般脚手架平台选择最新的即可，就是4版本，向下兼容，在4的脚手架里面写 vue 1 2 3版本的代码都是可以的。不要出现选了最新的vue版本3，然后选择的比较旧的脚手架版本1。

脚手架一般就使用最新版本。vue在公司使用的版本一般是2最多。（其实就是vue有一个官方网站，vue脚手架编写代码的平台也有一个官方网站）

Vue Cli脚手架介绍(生成Vue项目的一个东西)

---

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统（其实就是将整条链路打通了的，整个框架就在那，你只需要去填入代码就行了），提供:

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。（需要什么功能导入就行了）

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

• 可升级
• 基于 webpack（就一个打包器，将整个vue项目打包为JS然后去运行） 构建，并带有合理的默认配置（是管理包的工具，项目里面有package.json，里面都是依赖包，有点像go里面的gomod）
• 可以通过项目内的配置文件进行配置
• 可以通过插件进行扩展

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

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

认识NPM

---

vue的框架非常的灵活，它可以配合很多的第三方库去使用，这些第三方库是怎么下载的？这个就是需要通过NPM去下载的，包括vuecli本身去安装也是一样通过NPM去安装。NPM安装的是前端JS的各种包，这里使用的都是NPM的命令，而不是node命令。

在使用Vue Cli之前，需先了解一些关于NPM的知识点:

• NPM(Node Package Manager，Node包管理器)，存放JavaScript代码共享中心，是目前最大的JavaScript仓库，类似于Linux yum仓库。
• 可能你会联想到Node.js，Node.js是服务端的JavaScript，类似于Gin、Django，NPM是基于Node.js开发的软件。
• 随着Node.js兴起，生态圈的JS库都纷纷向NPM官方仓库发布，所以现在，大都是使用npm install命令来安装JS库，而不必再去它们官网下载了。
• 安装Node.js，默认已经内置npm，下载对应软件包直接安装即可。http://nodejs.cn/download/

常用命令介绍：

 配置npm淘宝源（默认国外源，下载依赖较慢）:

#设置淘宝源
npm config set registry https://registry.npm.taobao.org --global

#查看源
npm config get registry

Vue Cli脚手架使用

---

Vue Cli脚手架使用步骤（在安装好NPM的情况下再去安装脚手架）

• 命令安装:npm install -g @vue/cli@4.5.12
• 检查版本:vue -V
• 创建项目:vue  create  <项目名称> （帮你创建环境和例子，所以就叫脚手架）
• 选择Vue3项目
• 运行项目:npm run serve
• 访问

初始化vue项目之后会有一个node_modules目录，这个目录是用来存放和维护各种依赖包的，所有下载下来的依赖包都会下载到node_modules目录，一般代码要放到github上面去是不会将这个东西放上去的，删除掉这个东西再上传。因为这是根据你当时的系统环境它去下载的，在别人的机器上不一定能够使用。跑起来肯定直接报错，干掉这个目录之后直接去项目目录下下执行npm install，最后去执行nmp install。

什么都不加就是使用项目下面的package.json这个去安装所需要的依赖。

Vue项目目录 

---

下面就是来看看脚手架里面这些文件是干嘛的，哪些属于配置，哪些属于代码，代码又在哪写。 

 目录说明：

• .gitignore:哪些文件，哪些文件夹不想接受git的管理，那么就在这里配置好
• babel.config.js：babel的控制文件，涉及到es6转化es5，这个需要配置，到底怎么转换，采用什么样的标准，这里面不需要去配置什么了，直接使用官方的就行了。
• package.json：只要打开的工程是属于npm规范的，那么一定会有这个文件，包的说明书，这里面会去配置包叫什么名字，叫什么版本，采用的依赖和库都在这里，下面这些都是webpack里面的短命令。之前执行的npm run其实执行的时候执行的是vue-cli-service serve。

"build": "vue-cli-service build" 平时你给到别人的是.html .css .js，而不是给别人.vue文件，所有的功能都写完了，最后要将整个工程变为浏览器认识的东西，这个就是最后需要去编译执行的。

vue-cli-service lint：把整个代码里面写过的，.js .vue文件全部进行一次语法检查，很少使用。

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

• package-lock.json 包版本控制文件，记录版本和下载地址，避免重新下载没有版本控制导致下载的版本和项目不兼容。

"node_modules/@babel/compat-data": {
      "version": "7.22.9",
      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.22.9.tgz",
      "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
    },

src目录下面的main.js：vue实例的生成，全局组件的导入。当你执行了npm run serve的时候，直接就去运行mian.js，这个mian.js是一切的开端，

import { createApp } from 'vue'
import App from './App.vue'
import Test from '@/components/Test.vue'

console.log("main.js")

const app =createApp(App)
app.component('Test',Test)
app.mount('#app')

APP组件是父组件，下面一堆app跟着APP父组件混， 

src assets：主要是用来存放图片的

components：是用来存放子组件的地方

routes：需要你手动去创建，定义前端路由的地方

views：每个vue页面，比如deploy，或者ingress页面全部都放在这里，其实就是存放各个页面的文件。

import App from './App.vue'

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

assets里面一般存放静态资源。

下面是引入组件，所有程序员写出来的组件components都往这里面放，唯独App.vue不放在这里面，因为它是众多组件当中的王者。

import HelloWorld from './components/HelloWorld.vue'