1. Create a project

Create a new project named Blog
yarn create @vitejs/app blog
## Select Vue -> Vue TS
# install dependencies
yarn
# Run the project
yarn dev
Copy the code

You can see that the service has been started successfully: http://localhost:3000

2. Associate the Git repository

  1. Creating a Git repository
  2. Associate local and remote repositories
Initialize the Git environment
git init
# associated warehouse addressGit remote add origin# add file
git add .
# Submit information
git commit -m'ci(index): first commit'
# upload branch
git push --set-upstream origin master
Copy the code

3. Set the local IP address to the default service IP address

This setting can provide convenience for the joint adjustment with the back end, without obtaining the change of the local IP address every time, especially suitable for the cooperation of multiple people in the LAN development

  1. Download the nodeosModule:yarn add os

The OS module provides practical methods and properties related to the operating system. We can obtain some computer native information through this module

  1. In the project root pathvite.config.tsModify in file
// Import the OS module
import os from 'os'

// Obtain the local IP address
const NETWORK = os.networkInterfaces().WLAN
const IP = NETWORK.filter((ip: { family: 'IPv4' | 'IPv6', address: string }) = > ip.family === 'IPv4') [0].address

// Set the default service IP address and port number
export default defineConfig({
  // Use the server configuration related to the service
  server: {
    host: IP || '127.0.0.1' || 'localhost'.port: 9527}})Copy the code
  1. Restart the service to see what it waslocalhostWhere it was, it became our ownipaddress

4. Configure multiple languages: vue-i18n@next

  1. Download multilanguage dependencies:yarn add vue-i18n@next
  2. Create one in the path SRClocalefolder

  1. Newly added language categories

    en-US.ts

    export default  {
  name: 'blog'
}
Copy the code

    zh-CN.ts

    export default  {
  name: 'blog'
}
Copy the code

  2. Configuration index. Ts

    Note: Vite provides glob import, which allows you to import multiple modules from the file system using the special import.meta.glob function. Literature: cn. Vitejs. Dev/guide/featu… For example, const modules = import.meta.glob(‘./ folder /*.ts’), traversing modules’ keys to access the corresponding modules, is lazy loading. If you want to import all modules directly instead of loading them lazily, you can use import.meta.globEager, such as const modules = import.meta.globEager(‘./ folder /*.js’).

    // Introduce multiple languages
import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'

/ / reference https://cn.vitejs.dev/guide/features.html#glob-import import folder with more ts modules
const modules = import.meta.globEager('./*.ts')
// Get all language files
const getAllLang: () = > LocaleMessages<VueMessageType> = () = >{
  const message: LocaleMessages<VueMessageType> = {}
  // Get all files with languages in them
  for(let path in modules) {
    // Specify 4 bits for all multilanguages
    const key: string = path.slice(path.lastIndexOf('/') + 1, path.lastIndexOf('. '))
    const value = modules[path].default
    message[key] = value
  }
  return message
}

// Get the current language
type ILocale = 'en-US' | 'zh-CN'
const locale: ILocale = 'zh-CN'

const i18n = createI18n({
  locale,
  messages: getAllLang()
})

export default i18n;
Copy the code

  3. Register multiple languages in main.ts

    import { createApp } from 'vue'
import App from './App.vue'
import VueI18n from './locale'

let app = createApp(App);
app.use(VueI18n)
app.mount('#app')
Copy the code

  4. Use app.vue on the page

    <template>
  <div>{{ t('name') }}</div>
</template>

<script lang="ts">
import { useI18n } from "vue-i18n";
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    const { t } = useI18n();
    return{ t }
  }
})
</script>
Copy the code

5. Configuration SCSS

  1. Download sass: yarn add -d sass

  2. This can then be used in the page:

    <style lang="scss">
$bg-color: #f00;
.tt {
  background: $bg-color;
}
</style>
Copy the code

  3. If you need to provide a common SCSS file, you can configure vite.config.ts

    vite.config.ts

    // Path error required to install Node declaration: yarn add @types/ Node -d
const path = require('path')
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/style/index.scss"; `}}}})Copy the code

  4. Create the Style folder in the root directory

index.ts

$text-color: #00f;
Copy the code

  1. Use:

    App.vue

    <template>
  <div class="tt">{{ t('name') }}</div>
</template>

<style lang="scss">
$bg-color: #f00;
.tt {
  color: $text-color;
  background: $bg-color;
}
</style>
Copy the code

    Configuration of 6.axios

    Install dependency command: vue add axios

Then you notice that you have added a plugins to the directory

The automatically generated axios.js is shown below

"use strict";

import Vue from 'vue';
import axios from "axios";

// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error); });// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {
    // Do something with response data
    return response;
  },
  function(error) {
    // Do something with response error
    return Promise.reject(error); }); Plugin.install =function(Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return_axios; }},$axios: {
      get() {
        return_axios; }}}); }; Vue.use(Plugin)export default Plugin;

Copy the code