vue3项目起步:

 1.cmd窗口: vue create 项目名字

2.自定义创建:

5. 

3.选择一些选项 

 4. 选择vue3.0版本 

5.选择hash模式

6.选择less预处理器

 

7.标准代码风格:

 8.保存代码校验代码风格,代码提交时候校验代码风格

 

9.依赖插件或者工具的配置文件分文件保存

 

10.记不记录以上操作,这个按个人意愿选择,看你要不要保留了 

 项目创建完成之后,接下来,我们调整一下目录:

增加两个配置文件: jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*" :["./src/*"],
    }
  },
  "exclude":["node_modules","dist"]
}

上面代码的作用是: 使用路径别名@的时候可以提示路径。 不要去检查node_modules, dist 

.eslintignore 

/dist
/src/vender

 上面代码的作用是: eslint在做风格检查的时候忽略 dist 和 vender 不去检查。

 

封装axios:

安装:   npm i axios

src/utils/request.js:

export default (url, method, submitData) => {
  return instance({
    url,
    method,
    // toLowerCase这个方法是给字符串转成小写
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}

上面这段代码这样写的好处是什么? 这样写的话,我们就不用一看是get传参,然后我们用params,

post传参用data定义了

测试调用时,我们页面上的代码可以这样写:

<button @click="ajax"></button>

import request from "@/utils/request.js"
export default{
setup(){
const ajax = () =>{

request('接口地址','请求的方式',{参数}).then({
console.log(res)
})
}
}
}

注意:  

 

 

 

 

 

 

 


版权声明:本文为m0_59006402原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。