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: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': ''
          }
        }
      },
    }

  }