创建项目
用vscode创建vue的uniapp项目
用cli创建uniapp项目
首先得有vuecli才能用过cli创建项目
npm install -g @vue/cli
vue-cli安装好了之后就可以通过cli创建项目了
vue create -p dcloudio/uni-preset-vue my-project
‘my-project’是自定义的项目名字
正常创建项目应该是会报错,因为有墙不能远程连接github的uni代码工具
也就是这一步
F:\VUEobj>vue create -p dcloudio/uni-preset-vue uniddtest
Fetching remote preset dcloudio/uni-preset-vue...
ERROR Failed fetching remote preset dcloudio/uni-preset-vue:
ERROR RequestError: connect ETIMEDOUT 20.205.243.166:443
RequestError: connect ETIMEDOUT 20.205.243.166:443
at ClientRequest.<anonymous> (D:\node\node_global\node_modules\@vue\cli\node_modules\got\index.js:182:22)
at Object.onceWrapper (node:events:476:26)
at ClientRequest.emit (node:events:369:20)
at TLSSocket.socketErrorListener (node:_http_client:472:9)
at TLSSocket.emit (node:events:369:20)
at emitErrorNT (node:internal/streams/destroy:188:8)
at emitErrorCloseNT (node:internal/streams/destroy:153:3)
at processTicksAndRejections (node:internal/process/task_queues:81:21)
这个时候就要先把uni的工具下载下来然后再通过本地指向文件夹来安装
从网上下载uni-preset-vue文件,放到一个喜欢的文件夹位置
文件看这 uni-preset-vue下载
比如F:\VUEobj\uni-preset-vue-master
然后把上面的dcloudio/uni-preset-vue改成下载的文件的路径
vue create -p dcloudio/uni-preset-vue my-project
改成vue create -p F:\VUEobj\uni-preset-vue-master my-project
之后就开始创建uni的项目了
Vue CLI v4.5.13
✨ Creating project in F:\VUEobj\ddtestuni.
⚙️ Installing CLI plugins. This might take a while…
[ …] | refresh-package-json:serialize-javascript: sill refresh-package-json F:\VUEobj\ddtestuni\node_modules\repe…
等待一会后就开始通过uniapp创建模板项目了
Invoking generators...
Preset options:
? 请选择 uni-app 模板 (Use arrow keys)
> 默认模板
默认模板(TypeScript)
Hello uni-app
前后一体登录模板
看图模板
新闻/资讯类模板
自定义模板
怎么创建和选择请参照官方文档
第一次接触也不知道选什么模板 反正我选择了个’默认模板’
选择之后回车就开始创建项目了
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project ddtestuni.
👉 Get started with the following commands:
$ cd ddtestuni
$ npm run serve
显示创建成功后 通过 cd ddtestuni 进入项目目录
通过npm run serve启动项目
No type errors found
Version: typescript 3.9.10
Time: 5435ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.20.148:8080/
显示出项目运行的地址,点击或者浏览器输入 http://localhost:8080/ 这个地址就进去了,整个基础模板项目就创建完成了
创建之后在vscode中总是显示tsconfig.json有报错
在文件夹中创建一个文件,名字为1.ts
然后在tsconfig.json中增加点东西就好了
使用vuex
安装使用vuex,默认项目自带vuex功能但是没有引入调用
先创建store文件夹,文件夹中创建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
<!-- 用得上的对象名
authCode:"",
user:{},
-->
},
mutations: {
<!-- 对象增加值的方法
setuser(state,payload){
state.user = payload
}
-->
},
actions: {}
})
然后在main.js中引用挂载
import Vue from 'vue'
import App from './App'
import store from '../store'
Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
使用scss布局
测试了一下午 百度找了不下好几十个文章 终于搞定了
node官网下载 node.js 14.18.1
然后npm安装node-sass和sass-loader
npm install node-sass@4.14.1
npm install sass-loader@7.1.0
安装完成后看着没问题,项目也能运行起来,但是在样式里面写lang=scss的时候,会报错
Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'data'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
又经过了好长时间终于找到了这个方法解决
↓
根目录新建文件vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "@/uni.scss";`
}
}
}
}
然后重新npm run serve 就ojbk了
接口跨域问题解决
修改文件vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "@/uni.scss";`
}
}
},
devServer: {
proxy: {
// 示例钉钉接口解决跨域 所有钉钉接口主域名用ddapi代替
'/ddapi': {
target: 'https://oapi.dingtalk.com',
pathRewrite: {
'^/ddapi': ''
},
'/aaa': {
target: 'https://oapi.dingtalk.com',
pathRewrite: {
'^/aaa': ''
}
}
},
}
}