使用vue cli3配合ts搭建初始化项目
npm install --global @vue/cli
// 创建一个新的项目（如果你已经创建了项目，那就写成当前目录，也就是`vue create .`）
vue create my-project-name
是否在当前目录下创建，y
不使用预置的，手动选择
写一个hello world
- lifa.vue
<template>
<div>hello lifa</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component';
import HelloWorld from './HelloWorld.vue';
// 如果要引入组件必须写在@Component里
@Component({
components: { HelloWorld }
})
export default class Lifa extends Vue{
}
</script>
- App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<lifa></lifa>
</div>
</template>
import Lifa from './components/lifa.vue';
@Component({
components: {
Lifa,
},
})
使用webpack4配合ts搭建项目
- 创建package.json文件
npm init -y
- 安装webpack
yarn add webpack webpack-cli --dev
- 项目根目录下新建src/index.js入口文件
- index.js
console.log('hi')
- 创建一个webpack.config.js文件，默认配置如下
- webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
然后运行npx webpack
会看到如下警告
- 在
webpack.config.js里添加一个mode
module.exports = {
+ mode: 'development',
};
- 在package.json中配置我们的命令
"scripts": {
"build:dev": "webpack"
}
- 再创建一个生产环境下打包的
webpack.prod.js，将mode改成production
- webpack.prod.js
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'production',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
- package.json
"scripts": {
"build:prod": "webpack --config webpack.prod.js"
}
运行build:dev和build:prod都会打包在dist目录下生成一个bundle.js文件，但是dev下的是没有压缩过的代码，而prod里是压缩过的
运行build:dev生成的bundle.js
运行build:prod生成的bundle.js
webpack支持vue
- 安装webpack-dev-server
yarn add webpack-dev-server --dev
运行npx webpack-dev-server
问题：我们只能访问它打包后的bundle.js文件，仍然无法访问和打开一个html页面安装htm-webpack-plugin插件
yarn add --dev html-webpack-plugin
在webpack.config.js里添加下面的代码
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
};
再次运行npx webpack-dev-server
然后打开本地连接，会发现已经有一个首页了，它会默认给你生成一个隐藏的index.html
没装htm-webpack-plugin的插件时打开本地链接显示的是下面的
- 添加一个vue文件在index.js里引入
- lifa.vue
<template>
<div>
I am lifa, {{message}}
</div>
</template>
<script>
export default {
name: 'lifa',
data() {
return {
message: '你好'
}
}
}
</script>
- index.js
import Vue from 'vue'
import Lifa from './Lifa.vue'
let div = document.createElement('div')
div.id = 'app'
div.textContent = 'webpack'
document.body.appendChild(div)
new Vue({
el: '#app',
render: (h) => h(Lifa)
})
再次运行npx webpack-dev-server 会看到下面的报错
因为我们现在webpack不支持vue，所以我们需要配置安装一个vue-loader
- 配置vue-loader
yarn add -D vue-loader vue-template-compiler
在webpack.config.js中添加下面几行代码
- webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
再次运行npx webpack-dev-server就能看到我们vue组件中的内容了
webpack支持ts
- 安装ts-loader和ts
yarn add ts-loader --dev
yarn add typescript --dev
- 配置webpack.config.js
module.exports = {
+ resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
+ { test: /\.tsx?$/, loader: "ts-loader" }
]
}
};
- 新建一个tsconfig.json
{
"compilerOptions": {
"sourceMap": true
}
}
- 创建一个test.ts的dmeo
- test.ts
const a:number = 1
export const b = a
- index.js
import { b } from './test.js'
console.log(b)
现在我们就能看到控制台打印出1了
- 将入口文件index.js改成index.ts
改完后发现报错，找不到我们的vue相关的文件
解决办法：在src目录下新建一个shims-vue.d.ts文件
- shims-vue.d.ts
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
- 在我们的vue文件中使用ts
我们现在已经可以在项目里单独使用ts和单独使用vue了，但是在vue文件里使用ts打开页面后会出现下面的报错
- lifa.vue
<script lang="ts">
let a: string = 'hi'
console.log(a)
</script>
解决方法：在webpack.config.js里添加下面的代码
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader',
+ options: {
esModule: true,
}
},
{
test: /\.tsx?$/, loader: "ts-loader",
+ options: {
appendTsSuffixTo: [/\.vue$/]
}
}
]
},
下面我们就可以在我们的vue文件里写ts代码了
<template>
<div>
<div>{{number}}</div>
<div>
<button @click="add">+</button>
<button @click="minus">-</button>
</div>
</div>
</template>
<script lang="ts">
export default {
name: "lifa",
data() {
return {
number: 0
}
},
methods: {
add() {
let number: number = this.number + 1
this.number = number
},
minus() {
let number: number = this.number - 1
this.number = number
}
}
};
</script>
