1.使用uniapp搭建微信小程序项目并引入前端组件资源

1. 项目配置

1.1. 新建vue3项目

• 由于我们要使用vue3而不是vue2，以是要选好版本，也可以在后面改。
  
• 启用uniCloud，方便接口对接、小程序上线发布，淘汰存案之类的环节
  
• 用阿里云比力自制（5元/月，也有免费空间可以直接用。）
  
• 选择默认模板即可，暂时不搞一些框架，来训练手感。
  

1.2. 关联云空间

右键uniCloud，关联云空间，会给选择已有的云空间，很方便。

1.3. 运行到微信开辟者工具

2. 前端组件

2.1. uniCloud的内置组件和扩展组件

不过需要留意的是，扩展组件，需要添加从插件市场下载和安装，否则是不生效的。
举个例子：

2.2. uView3.0

这个是要留意的，原来vue2项目用的uview2比力多，要找uview3匹配。
进入插件市场：https://ext.dcloud.net.cn/
找到对应3.0的插件：https://ext.dcloud.net.cn/plugin?name=vk-uview-ui
其官方文档地址：

2.3. 在uniapp项目引入uview3

• main.js
  
  1. import App from './App'
  3. // #ifndef VUE3
  4. import Vue from 'vue'
  5. import './uni.promisify.adaptor'
  6. Vue.config.productionTip = false
  7. App.mpType = 'app'
  8. const app = new Vue({
  9.   ...App
  10. })
  11. app.$mount()
  12. // #endif
  14. // #ifdef VUE3
  15. // 引入 uView UI
  16. import uView from './uni_modules/vk-uview-ui';
  18. import { createSSRApp } from 'vue'
  19. export function createApp() {
  20.   const app = createSSRApp(App)
  21.   
  22.   // 使用 uView UI
  23.     app.use(uView)
  24.   
  25.   return {
  26.     app
  27.   }
  28. }
  29. // #endif

  复制代码
• App.vue 引入底子样式（留意style标签需声明scss属性支持）
  
  1. <script>
  2.         export default {
  3.                 onLaunch: function() {
  4.                         console.log('App Launch')
  5.                 },
  6.                 onShow: function() {
  7.                         console.log('App Show')
  8.                 },
  9.                 onHide: function() {
  10.                         console.log('App Hide')
  11.                 }
  12.         }
  13. </script>
  15. <style>
  16.         /*每个页面公共css */
  17. </style>
  19. <!-- App.vue 引入基础样式（注意style标签需声明scss属性支持） -->
  20. <style lang="scss">
  21.         @import "./uni_modules/vk-uview-ui/index.scss";
  22. </style>

  复制代码
• uni.scss 引入全局 scss 变量文件
  着实就是在最后加了一行。
  
  1. @import "@/uni_modules/vk-uview-ui/theme.scss";

  复制代码

用一个日历组件试一下是否引入成功：
index.vue

1. <template>
2.         <view>
3.                 <u-calendar v-model="show" :mode="mode"></u-calendar>
4.                 <u-button @click="show = true">打开</u-button>
5.         </view>
6. </template>
8. <script>
9.         export default {
10.                 data() {
11.                         return {
12.                                 show: false,
13.                                 mode: 'date'
14.                         }
15.                 },
16.                 onLoad() {
18.                 },
19.                 methods: {
21.                 }
22.         }
23. </script>

复制代码

要重新启动，看效果：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。