前言
在创建创建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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ts+vue项目</title>
</head>
<body>
<div id="app"></div>
</body>
</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
<template>
<div>
<p>ts+vue项目</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
})
</script>
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后，输入你保存预设环境的名字，下次创建同意环境的项目时，在选择创建的项目环境，就可以根据我们预设的环境去快速安装环境了
