Skip to content

Home

Jump to bottom
BO edited this page Nov 17, 2021 · 4 revisions

P2-Vite-Installation

Node.js

即使曾经安装过也使用最新版node.js重新安装，自动覆盖。修改到合适分区，例如D:\。其他全部默认，无需安装Chocolatey。

windows是中文用户名可能会有影响。

NPM Settings

进入windows命令行模式，设置npm服务器使用taobao镜像。复制以下命令，在控制台鼠标右键选择粘帖，回车执行。

npm config set registry http://registry.npm.taobao.org/

Vite Project

https://cn.vitejs.dev/guide/

https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

在合适位置创建vue-workspace工作区目录，存放所有vue项目。

通过命令行，进入工作区，执行vite项目初始化命令创建，vue，ts，项目。

npm init vite@latest

step1，输入项目名称。例如，vite-project-bo；step2，选择vue；step3，选择vue-ts

命令行进入工程目录，安装依赖。由于配置了国内镜像，下载速度会很快。依赖在100M以上

npm i

VS Vode

下载压缩版vscode，解压运行。安装volar/eslint，2个插件，重启vs code。

打开项目

在控制台视图(默认即是当前项目路径下)，crtl+`，运行命令启动项目

npm run dev

结束运行

ctrl+c

eslint/prettier

目的，以eslint检查代码规范，以prettier统一代码风格，并在保存文件时自动修复错误

以下方法参照vue/cli创建的项目来实现，当前(2021-11-14)官方还没有提供手脚架创建vite项目

安装以下依赖

npm i -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-prettier @vue/eslint-config-typescript eslint-config-prettier eslint-plugin-vue

创建，.prettierrc.json。单引号，无分号

{
    "htmlWhitespaceSensitivity": "ignore",
    "singleQuote": true,
    "semi": false
}

创建，.eslintrc.js。按vue-eslint-prettier检查

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 'off',
  },
}

当前项目.vscode目录下，创建settings.json。声明项目的vscode配置

{
  "editor.fontSize": 16,
  "editor.tabSize": 2,
  "window.zoomLevel": 1.0,
  "files.eol": "\n",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "git.enableSmartCommit": true,
  // "workbench.colorTheme": "Default Light+",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  }
}

快捷路径别名@

在 tsconfig.json 添加快捷路径别名，追加在compilerOptions。router引入组件时依然无效

"baseUrl": ".",
"paths": {
  "@/*": [
    "src/*"
  ]
}

在vite.config.ts中追加以下配置。否则运行时无法识别@。同时声明了其他常用配置

  resolve: {
    alias: {
      '@': '/src',
    },
  },
  base: './',
  build: {
    sourcemap: false,
  },

Router/Vuex

安装router

npm i vue-router@next

创建，src/router/index.ts。模板

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

const routes: Array<RouteRecordRaw> = []

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router

安装vuex

npm i vuex@next

创建，src/store/index.ts。模板

import { MutationTree, ActionTree, createStore } from 'vuex'

export interface State {
  message?: string
}

const myState: State = {}

const myMutations: MutationTree<State> = {}

const myActions: ActionTree<State, State> = {}

export default createStore({
  state: myState,
  mutations: myMutations,
  actions: myActions,
  modules: {},
})

在main.ts中引入router/vuex

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

Others

vite项目没有手脚架很不适合于初学者
一些再vue/cli里可以能够自动识别引入的类型，当前得手动引入
vue3.2引入的script setup标签很方便，且声明的响应式数据/函数等，视图终于支持了自动提示

vue组件规范名称为多单词，使用大驼峰或-短横线分割

https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential

Clone this wiki locally