初始化项目工程

问题

根据官网提示，通过 vue-cli 命令行创建项目，出现如下报错。

Fetching remote preset dcloudio/uni-preset-vue...
ERROR  Failed fetching remote preset dcloudio/uni-preset-vue:
ERROR  RequestError: connect ETIMEDOUT 192.30.253.112:443

解决

创建cli工程，会远程下载 dcloudio/uni-preset-vue，拉取失败时，可以通过手动下载来创建项目。

模板地址：https://github.com/dcloudio/uni-preset-vue

下载后，打开命令符，使用如下命令创建项目：

vue create -p 工具项目路径 项目名

创建成功后用hbuliderd打开（此处也可用vscode但是会有一些注释上的报错不影响运行但不美观）

按照下图进行操作绑定小程序的APPID

然后创建vue.config.js文件夹

const path = require('path')
//初始化配置 此处关键
const  CopyWebpackPlugin = require("copy-webpack-plugin");


function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    publicPath: './',
    lintOnSave: false,
    productionSourceMap: false, // 不会生成map文件 
    outputDir: 'uni-app', // 打包文件夹名称
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': {
                target: 'http://localhost:18081',
                changeOrigin: true,
                ws: false,
                pathRewrite: {
                    '/api': ''
                }
            }
        }
    },
    configureWebpack: config => {
        // 生产环境取消 console.log
        if (process.env.NODE_ENV === 'production') {
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
        }
    },
// 此处最关键
    configureWebpack: {
        plugins: [
            new  CopyWebpackPlugin({
                patterns: [
                    { //这里的from和to是指从哪里来到哪里去
                        from:  path.resolve(__dirname, "src/cloudfunctions"),
                        //to到哪里去
                        to:  path.resolve(__dirname, "dist/dev/mp-weixin/cloudfunctions"),
                    },
                ],
                options: { concurrency:  10 },
            }),
        ],
    },
    chainWebpack: config => {
        config.resolve.alias
            .set("@", resolve("./src")) // 根
            .set("@api", resolve("./src/api")) // 接口文件
            .set("@plugins", resolve("./src/plugins")) // 公共插件入口
            .set("@images", resolve("./src/assets/images")) // 项目images入口
            .set("@scss", resolve("./src/assets/scss")) // 项目scss入口
            .set("@component", resolve("./src/components")) // 项目公共组件入口
            .set("@views", resolve("./src/views")) // 项目单页入口
        config.module
            .rule("css")
            .test(/\.css$/)
            .oneOf("vue")
            .resourceQuery(/\?vue/)
    },

}

然后因为没有copy-webpack-plugin 需要下载依赖

// 下载这个版本的亲测有效  别的可能有问题
cnpm install copy-webpack-plugin@^6.4.1 --save  

然后按照下面图片编写

都成功之后在src下创建云函数

这个要是不知道里面内容的话就去微信开发者工具新建一个云开发项目 把里面的云函数这个文件夹复制下来放到uni-app项目src文件夹下就行 以上操作就是为了uni-app运行到小程序开发者工具的时候获取到云函数

然后在初始化的时候

<script>
    export default {
        onLaunch: function() {
            console.log("App Launch");
                        // 此处关键
            wx.cloud.init({
                // env 参数说明：
                //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
                //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
                //   如不填则使用默认环境（第一个创建的环境）
                //env: '你的环境ID',
                env: "",
                traceUser: true,
            });
            console.log('wx.cloud',wx.cloud)
            const db = wx.cloud.database() //创建数据库连接
            db.collection("cars").get() //获取数据表的信息
                .then(res => {
                    console.log(res)
                    // this.userInfo = res.result.data[0]
                })
                .catch(err => {
                    console.log(err)
                })
        },
        onShow: function() {
            console.log("App Show");
        },
        onHide: function() {
            console.log("App Hide");
        },
    };
</script>

<style>
    /*每个页面公共css */
</style>