vue cli 3 + typescript + webpack 项目搭建

·  阅读 2018

1、运用官方脚手架搭建

这是官方文档:cli.vuejs.org/zh/

全局安装 @vue/cli

npm install -g @vue/cli
复制代码

运行vue create

vue create vue-ts-demo
复制代码

default 那一项没有包含typescript,我们选择 Manually select features这一项。

我这里选择了babel,typescript,router,vuex,CSS Pre-processors,Linter / Formatter

然后按照提示选择自己需要安装的,这是我的选择。我没有选择默认的histoty mode for router,习惯了使用hash mode,这些都是可以自由选择的

配置成功之后

把项目跑起来

$ cd vue-cli3-ts-demo
$ npm run serve
复制代码

项目跑起来是 npm run serve,并不是以前的 npm run dev,可以看下package.json里面的代码

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},
复制代码

在浏览器打开地址 "http://localhost:8080/",可以看到项目已经跑起来了

2、typescript

ts的语法及用法,参考官方文档:www.tslang.cn/index.html

我之前也写过一些笔记:github.com/liujianxi/s…

3、项目结构

├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── router
│   │   └── index.ts
│   ├── shims-tsx.d.ts
│   ├── shims-vue.d.ts
│   ├── store
│   │   └── index.ts
│   └── views
│       ├── About.vue
│       └── Home.vue
└── tsconfig.json
复制代码

看一下项目结构,可以看到shims-tsx.d.ts和shims-vue.d.ts这两个文件

用处如下

shims-tsx.d.ts:允许在vue项目中使用.tsx文件,详细可参考此处

shims-vue.d.ts:允许导入和使用.vue单个文件组件,因为typescript默认并不支持导入vue文件

4、webpack配置

从项目结构中可以看到,之前的webpack相关的配置都不见了。

然后 vue-cli-service 是个什么东西,文档这么描述的

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)
复制代码

我们可以看到 vue-cli-service 是封装好的,开箱即用的。 可是有时候需要自己配置webpack,文档中也有给出方法,就是新建一个vue.config.js文件

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。
复制代码

在package.json同级处新建vue.config.js文件,按照文档,配置如下

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
  ? './'
  : '/',

  outputDir: 'dist',

  assetsDir: 'static',

  filenameHashing: true,

  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,

  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,

  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
  transpileDependencies: [],

  // 生产环境 sourceMap
  productionSourceMap: false,

  // cors 相关 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
  // corsUseCredentials: false,
  // webpack 配置,键值对象时会合并配置,为方法时会改写配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  configureWebpack: (config) => {
  },

  // webpack 链接 API,用于生成和修改 webapck 配置
  // https://github.com/mozilla-neutrino/webpack-chain
  chainWebpack: (config) => {
    // 因为是多页面,所以取消 chunks,每个页面只对应一个单独的 JS / CSS
    config.optimization
    .splitChunks({
        cacheGroups: {}
    });

    // 'src/lib' 目录下为外部库文件,不参与 eslint 检测
    config.module
    .rule('eslint')
    .exclude
    .add('/Users/maybexia/Downloads/FE/community_built-in/src/lib')
    .end()
  },

  // 配置高于chainWebpack中关于 css loader 的配置
  css: {
    // 是否开启支持 foo.module.css 样式
    requireModuleExtension: true,

    // 是否使用 css 分离插件 ExtractTextPlugin,采用独立样式文件载入,不采用 <style> 方式内联至 html 文件中
    extract: true,

    // 是否构建样式地图,false 将提高构建速度
    sourceMap: false,

    // css预设器配置项
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意:在 sass-loader v7 中,这个选项名是 "data"
        prependData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `data` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号,`sass` 则要求必须没有分号
      // 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置
      scss: {
      //   prependData: `@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
            primary: '#fff'
        }
      }
    }
  },

  // All options for webpack-dev-server are supported
  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    open: true,

    host: '127.0.0.1',

    port: 3001,

    https: false,

    hotOnly: false,

    proxy: null,

    before: app => {
    }
  },
  // 构建时开启多进程处理 babel 编译
  parallel: require('os').cpus().length > 1,

  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  // 第三方插件配置
  pluginOptions: {}
};
复制代码

值得注意的是 从 Vue CLI 3.3 起已弃用 baseUrl,推荐使用 publicPath

配置好之后运行 npm run serve 可以看到运行成功,刚配置的host、port已经生效,其他的配置可以自己慢慢添加

项目打包运行 npm run build 也是ok的

5、项目中的ts用法

项目已经搭建完毕,看一下里面的ts用法

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
  ...
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string; //非空断言
}
</script>
<style scoped>
</style>
复制代码

vue-property-decorator是什么呢,文档在这,它提供了函数 装饰器修饰符 语法

从官方文档中可看到

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}
复制代码

相当于

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    }
  }
}
复制代码

那么src/components/HelloWorld.vue 就相当于

<template>
  <div class="hello">
      <h1>{{ msg }}</h1>
  </div>
  ...
</template>
<script lang="ts">
export default {
  props: {
    msg: {
      type: String
    }
  }
}
</script>
<style scoped>
</style>
复制代码

以上

github地址:github.com/liujianxi/s…

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改