1.vue的介绍vue脚手架安装使用

要求

学生明确 vue 是什么，能够做什么，重点：每个学生能够自己安装 vue 脚手架，搭好前端框架

vue 简介

• vue是一个前端框架，核心概念就是数据双向绑定，免除原生JavaScript中的DOM操作，简化书写。
• vue是如何简化dom书写的呢？

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

这是我们之前写的代码。是不是很繁琐，而采用了咱们vue的双向绑定思维，当数据模型数据发生变化时，页面的展示也随之发生变化。

准备工作

1.1 什么是nodeJs

简单的说，node.js类似于jdk，它可以使JavaScript运行在服务端，并且可以跨平台，而不仅在局限于只可以运行在浏览器中。

学过java的可以理解下面的对照关系：

java => javascript

jdk => nodeJs

node这边建议不要急着安装，先安装nvm，用nvm安装node才是最合理的，nvm可以很方便的安装多个版本的node,并可以很方便的来回切换不同版本。

nvm安装node

nvm是node的包管理工具

这个安装很简单，完全是傻瓜式安装。

参考我的网址：https://www.jf3q.com/article/detail/3952

nvm 配置

以供参考，其中root 和path 是安装的时候你选择后自动生成的，后面是 nvm 下载 node 和 npm 的镜像，直接复制我的就行

root: D:\nvm
path: D:\Program Files\nodejs
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

特别注意

nvm use版本切换版本的时候无法选中版本，前面没法带*号，

这个问题是你安装nvm的时候路径选择错误

nvm的安装目录选择非c盘后，他还会让你选一个nvm的node工作区，这个目录也要选其他盘哦

常用命令

nvm ls :列出所有的已经安装成功的 node 版本

nvm install 12.18.3 ：安装指定 node 版本

nvm uninstall 12.18.3

nvm use 12.18.3

node -v

npm -v

1.2 什么是npm

npm是随同nodeJs一起安装的包管理工具，能解决nodeJs代码部署上的很多问题。如今的nodeJs已经内置了npm（npm跟nodeJs的关系就像maven跟java的关系）

常见的使用场景有以下几种：

允许用户从npm中央仓库下载别人编写的第三方包到本地使用。

允许用户从npm中央仓库下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

配置淘宝镜像

npm config set registry https://registry.npmmirror.com

查看是否配置成功

npm config get registry

1.3 vue跟nodeJs的关系

 如果web项目中没有前后端分离，直接使用<script src=“https://cdn.bootcss.com/vue/2.5.20/vue.min.js”></script>的方式引入vue，可以不安装nodeJs。因为这时候当客户端访问网页，网页中使用了vue，然后网页是运行在客户端的浏览器中的，vue.js是js文件，浏览器本来就可以执行js文件，因为浏览器底层有js引擎。（这种每次改了代码需要手动刷新）

 如果web项目中有前后端分离，前端项目想单独运行在服务器端，那么就要依赖nodeJs，不管前端项目是用vue技术栈还是react技术栈！因为项目想要运行，就必须依赖服务器，传统的nodejs可以用express充当服务器；而vue生态圈中有vue-cli脚手架，它已经实现服务器的功能，并且可以在它里面运行vue前端项目。（这种方式自动刷新）

1.4 什么是vue脚手架

vue脚手架也称为vue-cli，它类似于spring Initializr，可以快速生成一个可以运行的springboot项目。使用vue脚手架可以快速生成一个可独立运行的vue前端项目，因为它是可以独立运行的，所以需要依赖nodeJs。

安装vue-cli

安装最新版本: npm install -g @vue/cli

安装指定版本: npm install -g @vue/cli@4.4.1

测试是否安装成功：vue --version或者vue -V

创建vue项目

在你想创建项目的目录下cmd命令框打开，输入vue ui回车，然后再图形化界面操作即可

安装好这些插件

vscode开发vue项目(直接用 idea 开发也行)

必备的插件

Vetur

vue-helper

简单目录介绍

目录结构大致如下所示(可能有所差异，但基本都大差不差)。每个目录和文件的用途如下详细说明：

vue-project/
├── node_modules/              # 项目依赖的第三方 node 模块
├── public/                    # 静态资源目录，不会被 Webpack 处理
│   ├── favicon.ico             # 网站图标
│   └── index.html             # 主页 HTML 文件
├── src/                       # 源代码目录
│   ├── assets/                # 静态资源，如图片、样式表等
│   │   └── logo.png           # 示例图片
│   ├── components/            # Vue 组件
│   │   └── HelloWorld.vue     # 示例组件
│   ├── App.vue                # 主组件
│   ├── main.js                # 入口文件，用于创建和挂载根实例
│   ├── router/                # Vue Router 路由配置
│   │   └── index.js           # 路由配置文件
│   ├── store/                 # Vuex 状态管理
│   │   └── index.js           # Vuex 状态管理配置文件
│   ├── views/                 # 页面文件，通常包含路由组件
│   │   └── About.vue          # 示例页面组件
│   └── utils/                 # 工具和助手函数
│       └── helper.js          # 示例工具函数
├── .browserslistrc            # 浏览器兼容性配置
├── .editorconfig              # 编辑器配置文件
├── .eslintrc.js               # ESLint 配置文件
├── .gitignore                 # Git 忽略文件配置
├── babel.config.js            # Babel 配置文件
├── package.json               # 项目依赖和脚手架配置
├── package-lock.json          # 依赖版本锁定文件
├── README.md                  # 项目说明文件
└── vue.config.js              # Vue CLI 配置文件

以下是每个目录和文件的详细说明：

• node_modules/: 项目依赖的第三方 node 模块，包括 Vue、Vue Router、Vuex 等。
• public/: 包含不会被 Webpack 处理的静态资源，例如网站图标和入口 HTML 文件。

• favicon.ico: 网站的图标。
• index.html: 应用程序的入口 HTML 文件，通常会在此引入应用的主 JS 文件。

• src/: 应用程序源代码的主目录。

• assets/: 静态资源，如图片、样式表、字体等。
• components/: Vue 组件，通常包含可复用的组件。
• App.vue: 应用程序的主组件，所有的页面组件都会被渲染在它的 <router-view> 内。
• main.js: 应用的入口文件，用于创建 Vue 实例并挂载到 DOM 上。
• router/: Vue Router 路由配置。

• index.js: 路由配置文件，定义了应用的页面路由。

• store/: Vuex 状态管理。

• index.js: Vuex 状态管理配置文件，定义了全局状态。

• views/: 页面文件，通常包含路由组件。
• utils/: 工具和助手函数，可以在此目录下存放一些全局的工具方法。

• .browserslistrc: 配置浏览器兼容性列表，用于 Babel 和 Autoprefixer。
• .editorconfig: 编辑器配置文件，用于统一不同开发者的编辑器配置。
• .eslintrc.js: ESLint 配置文件，用于代码风格检查和错误检查。
• .gitignore: Git 忽略文件配置，指定了哪些文件和目录应该被 Git 忽略。
• babel.config.js: Babel 配置文件，用于将 ES6+ 代码转换成向后兼容的 JavaScript 代码。
• package.json: 项目依赖和脚手架配置，包括脚本命令、依赖包等信息。
• package-lock.json: 依赖版本锁定文件，确保在不同环境中安装的依赖版本一致。
• README.md: 项目说明文件，通常包含项目的基本信息和如何运行项目的说明。
• vue.config.js: Vue CLI 配置文件，用于自定义 Vue CLI 的构建配置。