Vue学习7-MinUI组件与项目托管到码云上

上一篇 Vue学习6-(webpack发布策略)
下一篇 Vue学习8-项目实战一：完成header、tabbar区域、路由组件切换与轮播图功能

---

---

一、使用render函数渲染组件

• render函数的特点：可以在页面指定的容器中渲染一个组件；
• 和传统的渲染组件方式相比，render 更霸道一些，页面上，只能渲染这唯一组件，其它的内容，都会被覆盖掉；

二、在webpack中配置.vue组件页面的解析

1、运行npm i vue -S将vue安装为运行依赖；

2、运行npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；

3、运行npm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；

4、在webpack.config.js中，添加如下module规则：

5、创建App.vue组件页面：

6、创建main.js入口文件：

三、在vue组件页面中，集成vue-router路由模块

四、scoped为css样式设置作用域

五、使用 MintUI 组件

1、导入所有MintUI组件：

import MintUI from 'mint-ui'

2、导入样式表：

import 'mint-ui/lib/style.css'

3、在 vue 中使用 MintUI：

Vue.use(MintUI

4、使用的例子：

<mt-button type="primary" size="large">primary</mt-button>

六、使用 MUI 代码片段（类似Bootstrap）需查文档

MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发； 因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件； 从体验上来说， MUI和Bootstrap类似； 理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；

七、将项目源码托管到码云

1、生成/添加SSH公钥

2、新建仓库

3、只需填写仓库名称，其他默认

4、Git全局设置

5、使用git init 在本地初始化项目

6、分别创建 README.md 和 .gitignore 来创建项目的说明文件和忽略文件；

7、使用git add .将所有文件托管到 git 中

8、使用 git commit -m "init project"将项目进行本地提交

9、使用git remote add origin 仓储地址将本地项目和远程仓储连接，并使用origin最为远程仓储的别名

10、使用git push -u origin master 将本地代码push到仓储中

11、回到码云刷新，就看到项目了

八、修改项目内容后可在VScode中提交到码云

效果：

---

上一篇 Vue学习6-(webpack发布策略)
下一篇 Vue学习8-项目实战一：完成header、tabbar区域、路由组件切换与轮播图功能