vue-cli 脚手架创建uniapp项目（微信小程序）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue-cli 脚手架创建uniapp项目（微信小程序）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

安装

1、全局安装 vue-cli 脚手架（不建议用 5.0 版本，避免报错）

 npm install -g @vue/cli@4.5.19

2、脚手架创建项目

vue create -p dcloudio/uni-preset-vue my-project

3、选择 默认模板 即可

4、编译并启动项目

npm run dev:mp-weixin

vue-cli 脚手架创建uniapp项目（微信小程序）

5、开发者工具，导入项目，注意路径 "项目地址/dist/dev/mp-weixin"

开发的规范

不能直接在开发者工具中修改代码，口诀：vscode做开发，开发者工具做调试
标签使用小程序的规范，语法使用vue的即可

项目目录结构

App.vue 相等于原生小程序 app.wxss （全局样式文件）和 app.js （应用入口文件）
main.js uniapp 项目入口文件，后期有一些设置想全局都生效(vuex)
mainifest.json 相当于小程序 project.config.json 设置 appid 、设置不校验合法域名一微信开发者工具一本地设置的功能
pages.json 相当于以前小程序当中全局配置 app.json 和页面配置 index.json
1. 新建了页面，需要在 pages.json 中设置页面路径
2. 设置应用的标题还可以设置单个页面的标题
3. 设置导航栏样式
4. 设置 tabbar
uni.scss 全局样式文件，写 scss 语法，默认被 uniapp 引入了，所以不需要手动去引入它
pages 文件夹是否 uniapp 页面文件！！
static 存放静态资源，图片，字体等

uniapp生命周期

口诀：组件生命周期使用vue规范，其他使用小程序规范

应用生命周期，使用小程序
1. onLauch等
页面生命周期，使用小程序
1. onLoad，onShow等
组件生命周期，使用vue的规范
1. created，mounted等

uniapp的api

1、wx的api，修改前缀后(uni)，可以直接用 : wx.showToast() ---- uni.showToast()

2、uni支持promise的使用方式

3、使用promise返回的是数组，建议直接解构使用即可

easycom

按照规范新建组件： components/组件名/组件名.vue
页面直接使用即可

vue-cli 脚手架创建uniapp项目（微信小程序）

引入和使用 uni-ui

在根目录创建 vue.config.js 文件，增加 @dcloudio/uni-ui 包的编译
```
module.exports = {
    transpileDependencies:['@dcloudio/uni-ui']
}
```
安装 sass 和 uni-ui
```
npm i sass @dcloudio/uni-ui
```

配置 easycom

// pages.json
{
    "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },
    
    // 原有内容
    pages:[ ... ]
}