# ts-extension-demo

**Repository Path**: zoujing2020/ts-extension-demo

## Basic Information

- **Project Name**: ts-extension-demo
- **Description**: 用vite+vue3做的typescript extension demo
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-13
- **Last Updated**: 2021-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一、安装（vue3.X+vite+ts）  
## 1,使用 vite 搭建项目 
```
//安装vite
//创建vite项目
//进入项目目录
//安装依赖
//运行项目
npm install -g create-vite-app
create-vite-app vite-demo
cd vite-demo
npm install
npm run dev
```
## 2,集成开发环境
### 1,typescript和sass
- 1,终端执行
```
npm install --save-dev typescript sass
```
- 2,初始化tsconfig.json，在控制台执行下面命令
```
npx tsc --init
```
- 3,将main.js修改为main.ts,同时将index.html里面的引用也修改为main.ts,然后在script 里添加 lang=“ts”
```
//app.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
```
- 4,修改完之后，重启就可以访问项目了。虽然这样配置是可以了，但是打开main.ts会发现import App from App.vue会报错:Cannot find module './App.vue' or its corresponding type declarations.,这是因为现在ts还没有识别vue文件，需要进行下面的配置:在项目根目录添加shim.d.ts文件
```
//shim.d.ts
declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}
```
### 2,vue全家桶
- 1,终端执行
```
npm install --save vue-router@next axios vuex@4.0
```
- 2,配置vue-router：在项目src目录下面新建router目录，然后添加index.ts文件，在文件中添加以下内容
```
import {createRouter, createWebHashHistory} from 'vue-router'

// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: []
})
```
- 3,配置vuex：在项目src目录下面新建store目录，并添加index.ts文件，文件中添加以下内容
```
import { createStore } from 'vuex'

interface State {
  userName: string
}

export default createStore({
  	state:{
  	userName:'王大合'
  	}
});
```
- 4,main.ts中引入vuex和vue-router
```
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'//新增
import vuex from './store/index'//新增

const  app = createApp(App)

app.use(router)//新增
app.use(vuex)//新增
app.mount('#app')
```
# 二、集成element-plus
- 1，在package.json添加依赖
```
"dependencies": {
    "element-plus": "latest",//新增
    "vue": "^3.0.2"
  },
```
- 2,安装依赖
```
npm install
```
- 3,引入
```
//main.ts
import ElementPlus from 'element-plus'//新增
import 'element-plus/lib/theme-chalk/index.css'//新增
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
const  app = createApp(App)
app.use(ElementPlus)//新增
app.mount('#app')
```

# 三、运行
```
npm run dev
```
# 四、打包
```
npm run build
```

# 五、格式化eslint+prettier
- 1，在package.json添加依赖
```
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "prettier": "^1.19.1",
```
- 2,安装依赖
```
npm install
```
- 3，根目录下面添加.eslintrc.json
```
{
  "root": true,
  "env": {
    "browser": true,
    "es2020": true,
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "rules": {
    "vue/max-attributes-per-line": [
      2,
      {
        "singleline": 20,
        "multiline": {
          "max": 1,
          "allowFirstLine": false
        }
      }
    ],
    "vue/html-self-closing": 0,
    "vue/singleline-html-element-content-newline": 0,
    "@typescript-eslint/camelcase": 0,
    "@typescript-eslint/no-explicit-any": 0
  }
}
```
- 4，根目录下面添加.prettierrc.json
```
{
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "avoid",
  "trailingComma": "none",
  "vueIndentScriptAndStyle": true,
  "htmlWhitespaceSensitivity": "ignore",
  "semi": true,
  "requireConfig": true,
  "singleQuote": false,
  "bracketSpacing": true,
  "endOfLine": "lf",
  "eslintIntegration": true,
  "printWidth": 80,
  "max-attributes-per-line": false
}
```