vscode创建uniapp项目
创建项目
用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:443at ClientRequest. (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: 5435msApp 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: {},mutations: {},actions: {}
})然后在main.js中引用挂载
import Vue from 'vue'
import App from './App'import store from '../store' Vue.config.productionTip = false
Vue.prototype.$store = storeApp.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': ''}}},}}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！