前端项目初始化，自用一些配置

settings.json

{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化 
"editor.formatOnSave": true,

// #让prettier使用eslint的代码格式进行校验 
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号 
"prettier.semi": false,
// #使用带引号替代双引号 
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

// #让vue中的js按编辑器自带的ts格式进行格式化 
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  "wrap_attributes": "force-aligned"
  // #vue组件中html代码格式化样式
 }
},
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"window.zoomLevel": 0,
"eslint.alwaysShowStatus": true, // 两个选择器中是否换行

}

jsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "jsx": "preserve",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

防止index.html中出现cleareslint警告，在.eslintrc.cjs中配置这个：

  rules:{
    'vue/comment-directive': 'off'
  }

制作favicon.ico，需要图片 网站1， 网站2，两个网站都可制作，建议制作成16×16尺寸，一般不会生效，可清空浏览器缓存

配置router router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  // 映射关系: path -> component
  routes: [
    {
      path: "/",
      redirect: "/home"
    },
    {
      path: "/home",
      // 懒加载
      component: () => import("@/views/home/home.vue")
    },
    {
      path: "/favor",
      component: () => import("@/views/favor/favor.vue")
    },
    {
      path: "/order",
      component: () => import("@/views/order/order.vue")
    },
    {
      path: "/message",
      component: () => import("@/views/message/message.vue")
    }
  ]
})

export default router

main.js

import router from './router'
createApp(App).use(router).mount("#app")

App.vue

<template>
  <div class="app">
    <router-view />
    <router-link to="/home">shouye</router-link>
    <router-link to="/favor">shoucang</router-link>
    <router-link to="/order">dingdan</router-link>
    <router-link to="/message">xiaoxi</router-link>
  </div>
</template>

pinia安装 npm i pinia---- stores/index.js

import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

main.js

import pinia from './stores'
createApp(App).use(router).use(pinia).mount('#app')

在stores下建立modules模块，建立city.js，模板如下：

import { defineStore } from "pinia";

const useCityStore = defineStore('city',{
  state: () => ({
    citis:[]
  }),
  actions:{

  }
})

export default useCityStore