uni-app 小程序开发项目搭建
前言
官网（搭建指南）：https://uniapp.dcloud.io/quickstart-cli
在上手开发小程序之前，先去uni-app官网浏览下，熟悉下官网。然后重点来了，阅读大佬的文章，可以少走很多弯路，传送门：uni-app小程序手把手项目实战
源码：https://github.com/zengxiaozeng/hello-uni-app
一、使用 cli 命令行创建 uni-app 项目：
打开 git 命令行工具：
全局安装vue-cli：npm install -g @vue/cli
1、创建项目：执行命令：项目名称是 longjiang-task-management
vue create -p dcloudio/uni-preset-vue longjiang-task-management
2、选择默认模板（直接回车）
3、项目搭建成功后，进入项目目录： cd my-project-template
4、执行命令：npm run dev:mp-weixin
5、打开微信开发者工具：
(1) 点击 “ 导入 ”
(2) 将项目的 dist 文件夹下的 dev --> mp-weixin 文件夹导入
(3) 填写 小程序的 AppId
即可进入页面：
二、默认模板目录结构
.
├─ node_modules/ # 库文件
├─ public/ # 公用工具库文件
├─ src/ # uni-app组件目录
│ ├─ pages/ # 业务页面文件存放的目录
│ │ ├─ index
│ │ │ ├─ index.vue # 页面组件
│ ├─ static/ # 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
│ ├─ App.vue # 应用配置，用来配置App全局样式以及监听
│ ├─ main.js # Vue初始化入口文件
│ ├─ manifest.json # 配置应用名称、appid、logo、版本等打包信息
│ ├─ pages.json #
│ ├─ uni.scss # 内置的sass变量，可以直接使用
├─ .gitignore #
├─ babel.config.js #
├─ package.json # 配置页面路由、导航条、选项卡等页面类信息
├─ package.jsonpostcss.config.js #
├─ README.md #
├─ tsconfig.json #
├─ yarn.lock #
三、创建项目开发目录及分包
1、uniapp目录变量命名开发规范：
https://blog.csdn.net/weixin_44575130/article/details/116738675
2、uni-app项目生命周期及组件API：
https://blog.csdn.net/weixin_43602502/article/details/121629274
3、注意：由于uni-app的插件使用的都是sass，我还是去换用了sass，不然使用插件的时候还是会报错
uniapp 引入全局 sass 预处理器：
参考：https://www.jianshu.com/p/a3ccd0ab0b65
注意：依赖安装在 dependencies 还是 devDependencies 文件目录下
深入理解package.json中dependencies和devDependencies 的区别：
现在很多前端框架项目中都需要使用到依赖，但是安装依赖的时候到底应该使用 --save或-S（简写） 还是 --save-dev或-D（简写） 呢，所以需要对dependencies和devDependencies 有清楚的认识。
dependencies：生产和开发都会用到的依赖，最后会被打包到项目中。eg：npm i jquery -S
devDependencies ：只在开发环境中使用的依赖，最后不会被打包到项目中。eg：npm i webpack -D
知道了这两者的定义，那么到底什么时候用哪种呢？下面给出具体说明：
如果这个依赖从开发到上线（生产）都需要使用，那么就使用--save或-S，例如，jquery、vue、axios、html2canvas等
如果这个依赖只是开发的时候要用，上线之后就不需要了，就可以使用--save-dev或-D，这样做有利于减小项目体积。例如开发项目中要用到的webpack及其插件，各种加载器如url-loader、sass-loader，各种babel转译插件如babel-core ......。这些依赖只是开发时候用到的工具，生产环境下就不需要了
步骤：
安装：
（1） 首先安装node-sass，因为sass-loader依赖于它。npm install node-sass --save-dev
此时报错：
这个错误的出现是因为 sas s安装时获取源的问题，修改 sass 安装的源。
解决办法：使用 taobao 的 npm：
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
回车后，再输入npm install node-sass --save-dev
（2） 安装sass-loader
npm install sass-loader --save-dev
- 出现报错：
解决方法：
打开 package.json 文件 → 找到 “sass-loader”，修改版本（例如改为 "sass-loader": "^9.0.2", ）保存文件，然后 npm install 安装对应版本。
- 此时项目运行起来，还是报错：
Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
原因： Node Sass7.0.1版本与^4.0.0不兼容
解决方法：
卸载 node-sass： npm uninstall node-sass --save-dev
安装 sass： npm i -D sass
（3） 修改style标签，声明使用sass，单个页面使用
<style lang="scss" scoped>style>
（4） 如果需要在App.vue全局引入sass，需要补上lang="scss"标签
<style lang="scss">
@import "./common/base.scss";
style>
到这里，本来是可以正常使用 sass 的时候，但是在实际开发中在 微信小程序开发工具中看的时候，总是显示 Node Sass7.0.1版本与^4.0.0不兼容 报错，一会儿正常一会儿报错，此时返回去看 package.json ：
sass和 sass-loader 安装在 devDependencies 中，神操作来了，，，我将其全部卸载，在 dependencies 中写入对应的版本，用上了 less。。。。。npm install 之后就可以正常使用了。
4、安装 moment 插件（专门针对日期格式转换的插件）
- 安装
npm install moment - 引入：在 main.js 中写下这段代码
import moment from "moment";
Vue.prototype.$moment = moment;
- 在页面中的应用：
this.$moment(this.createTime).format("YYYY-MM-DD");
备注： moment.js 文档：https://itbilu.com/nodejs/npm/VkCir3rge.html
5、注意： uniapp的样式，sass使用，全局样式，字体的使用
1. rpx 即响应式px，一种 根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准， 750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。比如如果你想设定宽度是屏幕的一半的话，宽度要设置为375rpx。
2. 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
3. 支持基本常用的选择器class、 id、 element等
4. 在uni-app中不能使用*选择器。
5. page 相当于| body 节点
6. 定义在App.vue中的样式为全局样式，作用于每一一个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。
7. uni-app |支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点:
字体文件小于40kb， uni-app 会自动将其转化为base64格式;
字体文件大于等于40kb， 需开发者自己转换，否则使用将不生效;
字体文件的引用路径推荐使用以~@开头的绝对路径。
@font-face {
font-family: test1- icon;
src: url('~@/static/iconfont.ttf');
}
● 使用scss或者less等工具需要再菜单栏的 工具- 插件安装 中下载