問題
根據(jù)官網(wǎng)提示，通過 vue-cli 命令行創(chuàng)建項(xiàng)目舵盈，出現(xiàn)如下報(bào)錯(cuò)。
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
解決
創(chuàng)建cli工程球化，會(huì)遠(yuǎn)程下載 dcloudio/uni-preset-vue秽晚，拉取失敗時(shí)，可以通過手動(dòng)下載來創(chuàng)建項(xiàng)目筒愚。
模板地址：https://github.com/dcloudio/uni-preset-vue
下載后赴蝇，打開命令符，使用如下命令創(chuàng)建項(xiàng)目：
vue create -p 工具項(xiàng)目路徑 項(xiàng)目名
創(chuàng)建成功后用hbuliderd打開（此處也可用vscode但是會(huì)有一些注釋上的報(bào)錯(cuò)不影響運(yùn)行但不美觀）
按照下圖進(jìn)行操作綁定小程序的APPID
然后創(chuàng)建vue.config.js文件夾
const path = require('path')
//初始化配置 此處關(guān)鍵
const CopyWebpackPlugin = require("copy-webpack-plugin");
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: './',
lintOnSave: false,
productionSourceMap: false, // 不會(huì)生成map文件
outputDir: 'uni-app', // 打包文件夾名稱
devServer: {
host: 'localhost',
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:18081',
changeOrigin: true,
ws: false,
pathRewrite: {
'/api': ''
}
}
}
},
configureWebpack: config => {
// 生產(chǎn)環(huán)境取消 console.log
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
}
},
// 此處最關(guān)鍵
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")) // 項(xiàng)目images入口
.set("@scss", resolve("./src/assets/scss")) // 項(xiàng)目scss入口
.set("@component", resolve("./src/components")) // 項(xiàng)目公共組件入口
.set("@views", resolve("./src/views")) // 項(xiàng)目單頁入口
config.module
.rule("css")
.test(/\.css$/)
.oneOf("vue")
.resourceQuery(/\?vue/)
},
}
然后因?yàn)闆]有copy-webpack-plugin 需要下載依賴
// 下載這個(gè)版本的親測有效 別的可能有問題
cnpm install copy-webpack-plugin@^6.4.1 --save
然后按照下面圖片編寫
都成功之后在src下創(chuàng)建云函數(shù)
這個(gè)要是不知道里面內(nèi)容的話就去微信開發(fā)者工具新建一個(gè)云開發(fā)項(xiàng)目 把里面的云函數(shù)這個(gè)文件夾復(fù)制下來放到uni-app項(xiàng)目src文件夾下就行 以上操作就是為了uni-app運(yùn)行到小程序開發(fā)者工具的時(shí)候獲取到云函數(shù)
然后在初始化的時(shí)候
<script>
export default {
onLaunch: function() {
console.log("App Launch");
// 此處關(guān)鍵
wx.cloud.init({
// env 參數(shù)說明：
// env 參數(shù)決定接下來小程序發(fā)起的云開發(fā)調(diào)用（wx.cloud.xxx）會(huì)默認(rèn)請求到哪個(gè)云環(huán)境的資源
// 此處請?zhí)钊氕h(huán)境 ID, 環(huán)境 ID 可打開云控制臺(tái)查看
// 如不填則使用默認(rèn)環(huán)境（第一個(gè)創(chuàng)建的環(huán)境）
//env: '你的環(huán)境ID',
env: "",
traceUser: true,
});
console.log('wx.cloud',wx.cloud)
const db = wx.cloud.database() //創(chuàng)建數(shù)據(jù)庫連接
db.collection("cars").get() //獲取數(shù)據(jù)表的信息
.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>
/*每個(gè)頁面公共css */
</style>
