01、(四)关于UniApp和Vue-cli的开发注意事项

01、关于UniApp和Vue-cli的开发注意事项

uniapp是改造vue，底层还是使用vue-cli做为脚手架。

你必须要有的认知：

1、uniapp不能去写div,span,只能用官方提供的组件标签或者自定义标签。

​ 用view取代-div,h1 用text取代了span

2、uniapp不需要你安装组件，安装 vue，安装sass 、因为uniapp的hbuilderx会内置进去。你直接使用即可。

你在项目中压根看不到node_modules这个文件夹。

3、异步处理怎么办？

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

4、组件的注册和使用呢?

• 组件是视图层的基本组成单元。
• 组件是一个单独且可复用的功能模块的封装。
• 一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。内容则写在两个标签之内。
  • 根节点为 <template>，这个 <template> 下只能且必须有一个根 <view> 组件。这是vue单文件组件规范 (opens new window)。
  • 一个组件的 data 选项必须是一个函数。

02、第三方组件的注册-uview-ui

1、导入插件到项目中

https://ext.dcloud.net.cn/plugin?id=1593

2：选择一个导入的工程

3:在uni_modules中生成uview-ui的文件夹

uni_modules 这个文件并不是node_modules，所以要注意：在导入和集成的时候一定指定目录

4：集成uview-ui到项目中

打开main.js注册uview-ui如下：

import App from './App'


// #ifndef VUE3
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

5：uview-ui全局样式的导入

打开App.vue，配置如下：

• 在hbuilder安装sass/less插件
• 一定在

<style lang="scss">
	/*每个页面公共css */
	// @import '@/uni.css';
	@import '@/static/css/common.css';
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

6：uview-ui的全局样式变量表的导入

在项目的根目录找打uni.css。把uview-ui的theme.css。导入其中即可。

/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），
 * 方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/**
 * 下方引入的为uView UI的集成样式文件，为scss预处理器，其中包含了一些"u-"开头的自定义变量
 * 使用的时候，请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
 * uView自定义的css类名和scss变量，均以"u-"开头，不会造成冲突，请放心使用 
 */

/*导入uview的样式变量参数*/
@import '@/uni_modules/uview-ui/theme.scss';


/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;

/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;

7、全局注册注册组件

在pages.json中使用easycom注册如下：

"easycom": {
	  "autoscan": true,
	  "custom": {
	    "^ksd-(.*)": "@/components/ksd-$1/ksd-$1.vue" ,
	    "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue",
	    "^uni-(.*)": "@/uni_modules/uni-$1/components/uni-$1/uni-$1.vue",
		"^pug-(.*)": "@/ucomponent/pug-$1/pug-$1.vue" 
	  }
	},

8：使用注册

<template>
	<view>
		<u-calendar :show="show"></u-calendar>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
			}
		}
	}
</script>