vue-cli3 + ts 环境搭建

vue-cli3 + ts 环境搭建

技术栈

- typescript
- vue-cli 3.x+
- yarn
- sass
- element-ui
- vuex

配置

    1. npm install -g @vue/cli（版本 vue-cli3）
        # OR
        yarn global add @vue/cli
    
    2. vue create project-name
        # OR
        vue ui
    
    选配
    Please pick a preset:
        -> Manually select features
            -> Babel | TypeScript | Router | Vuex  | Css Pre-processors | Liner / Formatter
    
    校验
    Pick a linter / formatter config
        -> TSLint
    
    保存的时校验还是提交时校验，选择保存时
    Pink additional lint features
        ->Lint on save
    
    单独存放还是集成在package.json，选择单独存放
    Where do you prefer placing config for Babel, PstCSS, ESLint, etc?
        -> In dedicated config files
    
    将此保存为将来项目的预设
    Save this as a preset for future projects ? 
        -> NO
        
    运行
    yarn serve

目录

    public
        - index.html
    src
        - assets: 静态资源
        - components：公共组件
        - router：路由
        - store：数据
        - views：容器组件
        - App.vue：根组件
        - main.ts：入口
        - shims-tsx.d.ts
        - shims-vue.d.ts
        
    .browserslistrc:项目的目标浏览器的范围,会被 @babel/preset-env 和 Autoprefixer 
                    用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
    .gitignore
    babel.config.js：ES6语法编译配置
    package.json：项目及工具的依赖配置文件
    tsconfig.json：ts的配置文件
    tsline.json

cli3 安装后已有插件

• vue-class-component：使用 TypeScript装饰器增强 Vue 组件
• vue-property-decorator：增强更多的结合 Vue 特性的装饰器
• vue-router
• vuex
• node-sass
• sass-loader
• typescript

element-ui

    全部引入：
        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);
        
    按需引入：
        - 插件:yarn add babel-plugin-component -D
        - .babelrc
          "plugins": [
            [
              "component",
              {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
              }
            ]
          ]
        - 引入：
            import { Button, Select } from 'element-ui';
            Vue.use(Button).use(Select)

babel.config.js

    yarn add @vue/babel-preset-app -D
    
     presets: [
        '@vue/app',
        {
          polyfills: [
            'es6.promise',
            'es6.symbol'
          ]
        }
      ],
      
    err: Module build failed (from ./node_modules/babel-loader/lib/index.js)
        yarn add @babel/core @babel/preset-env -D
    
    

vue-loader

   解决：Cannot find module .vue
   https://vue-loader.vuejs.org/zh/guide/
   npm install vue-loader -D
   
   根目录新建vue.config.js:
        const VueLoaderPlugin = require('vue-loader/lib/plugin')
        
        module.exports = {
          module: {
            rules: [
              // ... 其它规则
              {
                test: /\.vue$/,
                loader: 'vue-loader'
              }
            ]
          },
          plugins: [
            // 请确保引入这个插件！
            new VueLoaderPlugin()
          ]
        }

vueRouter

    import Router, { RouteConfig } from 'vue-router';
    
    - RouteConfig的类型定义：
        interface RouteConfig = {
          path: string; //路径
          component?: Component;
          name?: string; // 命名路由
          components?: { [name: string]: Component }; // 命名视图组件
          redirect?: string | Location | Function; //重定向
          props?: boolean | Object | Function;
          alias?: string | Array<string>; //别名
          children?: Array<RouteConfig>; // 嵌套路由
          beforeEnter?: (to: Route, from: Route, next: Function) => void;
          meta?: any; //路由元信息 使用$route.meta.属性可以获取
        
          // 2.6.0+
          caseSensitive?: boolean; // 匹配规则是否大小写敏感？(默认值：false)
          pathToRegexpOptions?: Object; // 编译正则的选项
        }

tslint 规则 ：去掉tslint规则 - 删除"extends": [// “tslint:recommended”]即可