# vuejs-cli

**Repository Path**: kobin_141925/vuejs-cli

## Basic Information

- **Project Name**: vuejs-cli
- **Description**: 脚手架-jshand
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-10
- **Last Updated**: 2024-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 安装vuejs



```
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
```

或者：

```
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```

# 使用vue-cli

## 安装nodejs

- 下载

https://nodejs.org/en

![image-20231117091355649](笔记/imgs/image-20231117091355649.png)

- 安装

![image-20231117091432078](笔记/imgs/image-20231117091432078.png)

![image-20231117091449393](笔记/imgs/image-20231117091449393.png)

![image-20231117092208460](笔记/imgs/image-20231117092208460.png)

![image-20231117092239871](笔记/imgs/image-20231117092239871.png)

![image-20231117092321946](笔记/imgs/image-20231117092321946.png)

![image-20231117092340564](笔记/imgs/image-20231117092340564.png)

![image-20231117092359323](笔记/imgs/image-20231117092359323.png)

## 验证node安装

```cmd
Microsoft Windows [版本 10.0.19045.3570]
(c) Microsoft Corporation。保留所有权利。

C:\Users\Administrator>node --version
v16.20.2

C:\Users\Administrator>npm --version
8.19.4

C:\Users\Administrator>

```



![image-20231117092538234](笔记/imgs/image-20231117092538234.png)

# Node介绍

​		Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于[Chrome](https://baike.baidu.com/item/Chrome/5633839?fromModule=lemma_inlink) [V8](https://baike.baidu.com/item/V8/6178125?fromModule=lemma_inlink)引擎的[JavaScript](https://baike.baidu.com/item/JavaScript/321142?fromModule=lemma_inlink)[运行环境](https://baike.baidu.com/item/运行环境/6555199?fromModule=lemma_inlink)，使用了一个[事件驱动](https://baike.baidu.com/item/事件驱动/9597519?fromModule=lemma_inlink)、非阻塞式I/O模型， [1] 让JavaScript 运行在[服务端](https://baike.baidu.com/item/服务端/6492316?fromModule=lemma_inlink)的[开发平台](https://baike.baidu.com/item/开发平台/8956190?fromModule=lemma_inlink)，它让JavaScript成为与[PHP](https://baike.baidu.com/item/PHP/9337?fromModule=lemma_inlink)、[Python](https://baike.baidu.com/item/Python/407313?fromModule=lemma_inlink)、[Perl](https://baike.baidu.com/item/Perl/851577?fromModule=lemma_inlink)、[Ruby](https://baike.baidu.com/item/Ruby/11419?fromModule=lemma_inlink)等服务端语言平起平坐的[脚本语言](https://baike.baidu.com/item/脚本语言/1379708?fromModule=lemma_inlink)。 [2] 

​		Node.js对一些特殊[用例](https://baike.baidu.com/item/用例/163511?fromModule=lemma_inlink)进行优化，提供替代的[API](https://baike.baidu.com/item/API/10154?fromModule=lemma_inlink)，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript[运行时](https://baike.baidu.com/item/运行时/3335184?fromModule=lemma_inlink)建立的平台， 用于方便地搭建响应速度快、易于扩展的[网络应用](https://baike.baidu.com/item/网络应用/2196523?fromModule=lemma_inlink)。 [3]

## 使用node运行http服务

```
const http = require('http');

//加载文件模块
const fs = require("fs");


const hostname = '127.0.0.1';
//端口
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  
 /** fs.readFile('./game.html', (err, data) => {
    if (err) throw err;
    console.log(data.toString);
    res.end(data);
  });
  */
   res.end('hello world')
  
 
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

```

![image-20231117093525203](笔记/imgs/image-20231117093525203.png)

![image-20231117093535887](笔记/imgs/image-20231117093535887.png)

# 安装 vue-cli

使用vue-cli创建工程化的 项目（模块化开发）

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 下面介绍 vue-cli 的整个搭建过程。

安装 **vue-cli** 需要用到 NPM包管理器工具

> 打开cmd  运行安装的命令
>
> npm install -g @vue/cli@4.1.1   --registry=https://registry.npmmirror.com

> 安装成功

![image-20231117094312850](笔记/imgs/image-20231117094312850.png)

## 验证vue脚手架

```
C:\Users\Administrator>vue -V
@vue/cli 4.1.1
```

# 使用脚手架创建项目

```
vue create  vuejs2
```

![image-20231117095228806](笔记/imgs/image-20231117095228806.png)

![image-20231117095533256](笔记/imgs/image-20231117095533256.png)

![image-20231117100405876](笔记/imgs/image-20231117100405876.png)

# 启动项目

使用npm 提供的脚手架  vue-service 启动前端项目

```
npm run serve
```

![image-20231117100558541](笔记/imgs/image-20231117100558541.png)

![image-20231117100622003](笔记/imgs/image-20231117100622003.png)

# 介绍vue-cli项目的目录结构

![image-20231117103453681](笔记/imgs/image-20231117103453681.png)

## 关闭eslint校验

## 修改开发服务器的 端口号

在项目的跟目录下 添加 `vue.config.js`文件

```js
module.exports = {
    lintOnSave:false, //关闭代码格式化校验工具
    devServer:{
        port: 80 //修改启动端口
    }
}
```



![image-20231117104159326](笔记/imgs/image-20231117104159326.png)

# 使用脚手架测试双向绑定

App.vue

```
<template>
  <div id="app">
			
	  <input type="text"  v-model="message" >
   
	   <div>{{message}}</div>
   
   
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
	  return {
			message:'Hello Vue - Cli'
	  }
  }
  
 }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

```

# 自定义组件

1. 创建vue文件
2. 在主文件（App）引用，
3. 声明组件
4. 使用组件

## 创建vue文件

```
<template>
	<!-- 编写html 模板  允许嵌入vue专有的代码  只允许有一个跟标签 2.x   3.x 可以有多个跟标签   -->
	<div>
		自定义组件
	</div>
	
	
</template>

<script>
</script>

<style>
</style>
```

## 引用

```
 import MyComponent from './components/MyComponent.vue';
```



## 声明组件

![image-20231117112349509](笔记/imgs/image-20231117112349509.png)

## 使用组件

![image-20231117112408013](笔记/imgs/image-20231117112408013.png)

```
<template>
  <div id="app">
			
	<MyComponent></MyComponent>
   
  </div>
</template>

<script>
 import MyComponent from './components/MyComponent.vue';
	

export default {
  name: 'App',
  components:{
	  MyComponent:MyComponent
  }

 }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

```

# 组件中定义样式

样式默认是全局的，如果需要限定在组件中生效，需要在style标签中添加  scoped属性

![image-20231117113708046](笔记/imgs/image-20231117113708046.png)

![image-20231117113723072](笔记/imgs/image-20231117113723072.png)

## 引用全局的样式

> 在main.js中引用全局的样式

````
import Vue from 'vue'
import App from './App.vue'


// 导入全局的样式

import './assets/reset.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

````

# Vue-Tools

Vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。

vue-devtools如何使用

当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的，上手非常的容易，这里就细讲其使用说明了。



## 下载CRX文件（离线安装）

![image-20231122102850961](笔记/imgs/image-20231122102850961.png)

![image-20231122102905908](笔记/imgs/image-20231122102905908.png)

打开开发者模式

![image-20231122102945190](笔记/imgs/image-20231122102945190.png)

![image-20231122102954041](笔记/imgs/image-20231122102954041.png)

将CRX文件拖拽到 扩展程序页面

![image-20231122103047115](笔记/imgs/image-20231122103047115.png)

![image-20231122103104706](笔记/imgs/image-20231122103104706.png)

添加扩展程序

# 组件

- 全局的：  通用的组件（使用多次）  别人写的
- 局部的：不通用的（用一次）   自己写的

# ElementUI

> 安装： https://element.eleme.cn/#/zh-CN/component/installation
>
> 在项目根目录中（包含package.json文件）
>
> npm i element-ui -S   --registry=https://registry.npmmirror.com
>
> npm install element-ui  -S   --registry=https://registry.npmmirror.com



![image-20231122155749401](笔记/imgs/image-20231122155749401.png)

在上述目录中打开cmd 执行

````
npm i element-ui -S   --registry=https://registry.npmmirror.com
````

![image-20231122160108887](笔记/imgs/image-20231122160108887.png)

## 注册全局组件



# 父子组件通讯

## 子组件获取父组件的数据

- 子组件声明属性
- 父组件使用属性





# 路由（Vue-Router）

## 安装

现在用的vuejs  2.7.15    --Vue-Router @3

````shell
npm i     vue-router@3       -S    --registry=https://registry.npmmirror.com
````

## 使用

- ## 编写router的映射关系    VueRouter  -- router

  ```
     {   path:'/user',component:User }
     {   path:'/role',component:Role }
     {   path:'/menu',component:Menu }
  ```

  

- 配置Vue-Router中的组件（router-link  router-view）全局注册

  - /user    router-view  ( User)
  - /role     router-view  ( Role)

  ![image-20231123142726109](笔记/imgs/image-20231123142726109.png)

- 配置router 到 根组件（main.js）中的new Vue() ---子组件可以继承

![image-20231123145519236](笔记/imgs/image-20231123145519236.png)

- 在需要动态显示组件的位置 配置   router-view 

  ![image-20231123145548516](笔记/imgs/image-20231123145548516.png)



# Axios 

http://www.axios-js.com/



> Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
>
> - 从浏览器中创建 [XMLHttpRequests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
> - 从 node.js 创建 [http](http://nodejs.org/api/http.html) 请求
> - 支持 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) API
> - 拦截请求和响应
> - 转换请求数据和响应数据
> - 取消请求
> - 自动转换 JSON 数据
> - 客户端支持防御 [XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery)
>
> 安装
>
> npm install axios

```
npm i    axios    --s    --registry=https://registry.npmmirror.com
```

![image-20231124134200152](笔记/imgs/image-20231124134200152.png)

## 

## 编写后端应用

完成Dept表的CRUD操作（接口）

- 调试工具
- Axios(js  ajax)
- http：浏览器
- postman、ApiFox、Apixxx

## DeptController的CURD

![image-20231124135258253](笔记/imgs/image-20231124135258253.png)

## 使用Fastjson序列化内存对象--json

1. ## 安装

```
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.83</version>
</dependency>

```

![image-20231124141359022](笔记/imgs/image-20231124141359022.png)

![image-20231124144003674](笔记/imgs/image-20231124144003674.png)

# Vuex

跨组件之间通讯，状态管理

## 安装、

vuejs 2.7      vuex   3.x

````
npm i  vuex@3   -S      --registry=https://registry.npmmirror.com
````



## Vuex持久化

Vuex的状态存储并不能持久化，存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了



H5的API

- window.localStorage     :   一直有效
- window.sessionStorage  :   会话有效

# 安装

```
npm i vuex-persist   -S     --registry=https://registry.npmmirror.com
```

![image-20231201090117175](笔记/imgs/image-20231201090117175.png)

## 使用插件

> storage:   存储的位置  ，本地存储(localStorage     ) 还是会话存储 (sessionStorage  )

```
import VuexPersist from 'vuex-persist'

const vuexLC = new VuexPersist ({storage: window.localStorage }) 
```

> 配置插件到store

```
plugins: [vuexLC.plugin]
```





# 安装 vue-element-admin

# 使用 [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)

下载  git   :  

- https://github.com/PanJiaChen/vue-admin-template

- https://gitee.com/chen_wei_jing/vue-admin-template

1. 下载压缩包
2. git clone 

![image-20231201093838112](笔记/imgs/image-20231201093838112.png)

## 安装依赖

````]
npm instatll  --registry=https://registry.npmmirror.com
````



# 创建聚合项目

​		父项目

​            |————————————his-server-后端的代码

​            |————————————his-ui

### 创建父项目

![image-20231201102856407](笔记/imgs/image-20231201102856407.png)

- 删除src

### 创建后端项目

![image-20231201103419464](笔记/imgs/image-20231201103419464.png)

![image-20231201103518461](笔记/imgs/image-20231201103518461.png)

### 创建前端项目

![image-20231201103710209](笔记/imgs/image-20231201103710209.png)

将Vue-element-admin复制到his-ui中（ui中默认文件删掉）