vue-cli构建ts项目

爱被打了一巴掌 2022-11-25 10:14 241阅读 0赞

## 1、构建项目 ##

vue create xxx

![format_png][]

上面的第一条，也就是 aaa 这一个选项在你第一次创建项目的时候是并不会出现的，只有你第一次创建完成项目后回提示你保存为默认配置模板，下次新建项目的时候就可以使用你选用的配置快速新建项目了，不需要再重新选择配置项目了。

第二条选项便是 vue cli 3 默认的项目模板，包含 babel 和 eslint。

第三条选项便是自主选择你项目所需的配置。

这里由于默认模板没有啥展示的必要所以我们便选择手动配置。

**选择项目配置**

这里我们可以选择我们需要的配置选项，选择完成后回车进入下一步。

在选择功能后，会询问更细节的配置

![format_png 1][]

TypeScript：

1.  是否使用class风格的组件语法：Use class-style component syntax?
2.  是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?

Router:

1.是否使用history模式：Use history mode for router?

CSS Pre-processors：

1.  选择CSS 预处理类型：Pick a CSS pre-processor

Linter / Formatter

1.  选择Linter / Formatter规范类型：Pick a linter / formatter config
2.  选择lint方式，保存时检查/提交时检查：Pick additional lint features

Testing

1.  选择Unit测试方式
2.  选择E2E测试方式

选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

![format_png 2][]![format_png 2][]

# 2、修改配置  #

vue-cli3脚手架生成项目目录说明

│  .browserslistrc
    │  .gitignore
    │  .postcssrc.js // postcss 配置
    │  babel.config.js
    │  package.json // 依赖
    │  README.md // 项目 readme
    │  tsconfig.json // ts 配置
    │  tslint.json // tslint 配置
    │  vue.config.js // webpack 配置（~自己新建~）
    │  yarn.lock
    │  
    ├─public // 静态页面
    │  │—favicon.ico
    │  │—index.html
    │ 
    ├─src // 主目录
    │  ├─assets // 静态资源
    │  │      logo.png
    │  │  
    │  ├─components
    │  │      HelloWorld.vue
    │  │ 
    │  │─views // 页面
    │  │      About.vue
    │  │      Home.vue
    │  │ 
    │  │  App.vue // 页面主入口
    │  │ 
    │  │  main.ts // 脚本主入口
    │  │ 
    │  ├─router // 路由配置
    │  │      index.ts
    |  |      routes.ts
    │  │  
    │  │  registerServiceWorker.ts // PWA 配置
    │  │ 
    │  │  shims-tsx.d.ts
    │  │  shims-vue.d.ts
    │  │         
    │  │  
    │  ├─store // vuex 配置
    │  │      index.ts
    │  │      
    │  ├─typings // 全局注入（~自己新建~）
    │  │  
    │  ├─utils // 工具方法(axios封装，全局方法等)（~自己新建~）
    │  
    │          
    └─tests // 测试用例
        ├─e2e
        │  ├─plugins
        │  │      index.js
        │  │      
        │  ├─specs
        │  │      test.js
        │  │      
        │  └─support
        │          commands.js
        │          index.js
        │          
        └─unit
                HelloWorld.spec.ts

### 1、在.browserslistrc文件中添加 ###

last 3 ie versions,
    not ie <= 8

`其它配置，请去https://github.com/browserslist/browserslist。npx browserslist`在项目目录中运行以查看查询选择了哪些浏览器

### 2、tslint配置 ###

// 关闭console
    "no-console": [true, "log", "dir", "table"]
        
    // tslint的函数前后空格：
    "space-before-function-paren": ["error", {
      "anonymous": "always",
      "named": "always",
      "asyncArrow": "always"
    }]
    
    
    // tslint分号的配置：
    "semicolon": [true, "never"]

其它规则：[https://palantir.github.io/tslint/rules/][https_palantir.github.io_tslint_rules]

### 3、路由处理逻辑（登录验证、拦截等） ###

// router/riutes.ts
    
    import {RouteConfig} from "vue-router";
    
    /**
     * meta 可配置参数
     * @param {boolean} icon 页面icon
     * @param {boolean} keepAlive 是否缓存页面
     * @param {string} title 页面标题
     */
    const routes: Array<RouteConfig> = [
        {
            path: '/',
            name: 'Home',
            component: () => import('@/views/Home.vue'),
            meta: {
                icon: '',
                // keepAlive: true,
                title: 'Home'
            }
        },
        {
            path: '/about',
            name: 'About',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import('@/views/About.vue')
        }
    ]
    
    export default routes

// router/index.ts
    
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import routes from "@/router/routes";
    Vue.use(VueRouter)
    
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    // 跳转之前
    router.beforeEach((to,from,next) => {
       if (to.name === 'login') {
        next({name: 'home/index'})
      } else {
        next()
      }
    })
    
    // 跳转之后
    // router.afterEach(to => {
    //
    // })
    
    export default router

### 4、axios改造 ###

npm i axios --save

src下新建axios.d.ts axios.config.ts文件

//axios.config.tsimport axios, { AxiosInstance } from 'axios'
    
    declare module 'Vue/types/vue' {
        interface Vue {
            $axios: AxiosInstance
        }
    }

// main.ts文件
    import Vue from 'vue';
    import axios from 'axios';
    
    Vue.prototype.$axios = axios;
    
    /**
     * 创建 axios 实例
     */
    const service = axios.create({
        timeout: 3000,
        baseURL: 'http://xxx',
    });
    
    /**
     * req 拦截器
     */
    service.interceptors.request.use((config: object): object => {
        return config
    }, (error: any): object => {
        return Promise.reject(error)
    });
    
    /**
     * res 拦截器
     */
    service.interceptors.response.use((response: any) => {
        const res = response.data;
        if (res.error) {
            if (process.env.NODE_ENV !== 'production') {
                console.error(res);
            }
            return Promise.reject(res);
        }
        return Promise.resolve(res);
    });

// main.ts
    import './axios.config';

### 4、store改造 ###

├── index.html
    ├── main.js
    ├── components
    │   ├── App.vue
    │   └── ...
    └── store
        ├── index.ts          # 我们组装模块并导出 store 的地方
        ├── actions.ts        # 根级别的 action
        ├── mutations.ts      # 根级别的 mutation
        └── modules
            ├── cart.ts      # 购物车模块

使用：

*  使用`module`形式
 *  全局的一些操作，方法，放入`store`中，业务逻辑尽量少放，项目全局方法可以放入。例如：`cookie`, `global cache`

`　　action(异步)`: api的操作， 调用方式：`this.$store.dispatch(functionName, data)`

`　　mutations(同步)`: dom相关操作，方法名一般使用常量，  
　　调用方式: `this.$store.commit(mutationsName, data)`

`this``.$store.getters[XXX] =>``this``.$store.getters[namespaced/XXX]`

`this``.$store.dispatch(XXX, {}) =>``this``.$store.dispatch(namespaced/XXX, {})`

`this``.$store.commit(XXX, {}) =>``this``.$store.commit(namespaced/XXX, {})`

//store/index.ts
    import Vue from 'vue';
    import Vuex from 'vuex';
    import cart from './modules/cart';
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      modules: {
        cart,
      },
    });

// cart.ts
    import {ActionContext} from 'vuex';
    export interface State {
        token: string;
    }
    
    const state: State = {
        token: '',
    };
    
    // getters
    const getters = {
        toUpperToken: (state: State) => {
            return state.token.toUpperCase();
        },
    };
    
    // actions
    const actions = {
        setTokenAsync({ commit }: ActionContext<State, State>, payload: any) {
            setTimeout(() => {
                commit('setToken', payload);
            }, 1000);
        },
    };
    
    // mutations
    const mutations = {
        setToken(state: State, payload: any) {
            state.token = payload;
        },
    };
    
    export default {
        namespaced: true,
        state,
        getters,
        actions,
        mutations,
    };

### 5、vue.config.js配置 ###

[　　https://cli.vuejs.org/zh/config/\#vue-config-js][https_cli.vuejs.org_zh_config_vue-config-js]所列出的属性，可以直接配置。其它属性可以通过[configureWebpack][]、[chainWebpack][]配置。

# 6、main.ts #

import Vue from 'vue'
    import App from './App.vue'
    import './registerServiceWorker'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

[format_png]: /images/20221124/0c09292db8b94c1298d8472f405ed701.png
[format_png 1]: /images/20221124/4e6a319b313943b8a7ef7a9642603854.png
[format_png 2]: /images/20221124/4f0586a8d6b9411d871974fb41e056be.png
[https_palantir.github.io_tslint_rules]: https://palantir.github.io/tslint/rules/
[https_cli.vuejs.org_zh_config_vue-config-js]: https://cli.vuejs.org/zh/config/#vue-config-js
[configureWebpack]: https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
[chainWebpack]: https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7