创建TS+Vue环境

前言

在创建创建TS+Vue环境环境之前，执行的npm命名前，需要确保安装了Node.js

一、webpack手动创建TS+Vue环境

1. 初始化创建package.json文件

npm init -y

2. 安装配置插件等

• 手动安装命令

npm i -D webpack webpack-cli webpack-dev-server
npm i -D typescript ts-loader
npm i -D vue vue-loader vue-template-compiler
npm i -D vue-class-component vue-property-decorator
npm i -S @babel/core @babel/preset-env babel-loader
npm i -S file-loader url-loader
npm i -S css-loader style-loader
npm i -S html-webpack-plugin

• 或将配置好的package.json文件拷贝进去，执行npm i安装命令即可
  copy时注意项目名字

// package.json
{
  "name": "tsproject1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules\\.bin\\webpack --mode production",
    "serve": "node_modules\\.bin\\webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^6.2.2",
    "file-loader": "^3.0.1",
    "url-loader": "^1.1.2",
    "css-loader": "^2.1.1",
    "style-loader": "^0.23.1",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.0.4",
    "typescript": "^3.8.3",
    "vue-class-component": "^7.2.3",
    "vue-loader": "^15.9.1",
    "vue-property-decorator": "^8.4.1",
    "webpack-dev-server": "^3.10.3"
  }
}

安装命令

npm i

3. 初始化创建tsconfig.json文件，配置

tsc --init

{
  "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "strict": true,
      "module": "es2015",
      "moduleResolution": "node",
      "target": "es5",
      "skipLibCheck": true,
      "esModuleInterop": true,
      "experimentalDecorators": true
  },
  "include": [
      "./src/**/*"
  ],
  "exclude": [
    "./dist/"
  ]
}

4. 创建webpack.congif.js文件，并配置文件

const path = require('path'); //nodejs内置模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const resolve = dir => path.resolve(__dirname, dir);
 
module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'), // d://webpakc/dist
    filename: 'bundle.js' // d://webpakc/dist/bundle.js
  },
   //本地服务
   devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    historyApiFallback: true, //不跳转
    inline: true //实时刷新
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js",".json",".vue"],
    // 设置别名
    alias: {
      '@': resolve('src') // 这样配置后 @ 可以指向 src 目录
    }
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        include: path.resolve(__dirname, 'src'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 12192
          }
        }]
      },
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
 
  //插件
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: __dirname + "/public/index.html"
    }),
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
};

5. 创建src、public等文件夹，并创建起始文件index.html和main.ts以及App.vue文件

• inde.html

• main.ts

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

6. ts文件声明

• 在src目录下创建vue-shims.d.ts文件并配

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

• App.vue

7. 项目目录结构

• 完成以上操作后，项目目录结构如下

  
  

二、vue-cli搭建ts+vue环境项目

1. 在需要创建的目录下出入一下命令

• vue create 项目名
• 注意：项目名不能有大写

vue create mytsvue

2. 选择创建的项目环境

• 这里我们选择Manually select features 自己手动创建，如果之前有自己搭建好的环境，选择对应的搭建好的环境即可

  
  

3. 选择安装的部分插件

• 在这里选择需要安装的一些插件，我们用typescript实现开发，肯定要勾选TypeScript
  

4.是否使用babel和类样式的组件语法

• 这里表示的意思是：
  在TypeScript旁边使用Babel(现代模式需要，自动检测填充，传送JSX)?
  使用类样式的组件语法?
  在这里我们暂时都选择的yes
  

5. 选择scss预处理器

• 当操作来着这一步时，选择css预处理技术时，最好勾选第一个，因为本人在这里踩过坑，选第二个创建项目会报错

  
  

6. 设置配置文件的存放位置

• 这里的意思是 你更喜欢将Babel, ESLint等的配置放在哪里?这里我选择的是In dedicated config files，放在在专用配置文件中
  

7.保存预设环境

• 这里的意思是表示是否将当前创建的环境预设保存，方便在下一次创建项目时快速搭建环境

  
  
• 选择yes后，输入你保存预设环境的名字，下次创建同意环境的项目时，在选择创建的项目环境，就可以根据我们预设的环境去快速安装环境了