51工具盒子诚实的生活方式其实是按照自己身体的意愿行事，饿的时候才吃饭，爱的时候不必撒谎。------马尔克斯《霍乱时期的爱情》
官方文档：https://www.typescriptlang.org/docs/handbook/intro.html
首先找到中文文档：https://www.tslang.cn/samples/index.html
寻找到vue.js
跳转过去后就是教程，我们跟着教程一步一步来
首先新建一个空项目
然后新建src目录和components目录
|-----------------|--------------------------------------------------------------------------|
| 1 2 3 4 | hljs dir typescript-vue-tutorial/ ├─ dist/ └─ src/ └─ components/ |
输入命令下载依赖
|-----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 | hljs shell D:\file\projects\vue-ts-demo>cnpm install --save-dev typescript webpack webpack-cli ts-loader css-loader vue vue-loader vue-template-compiler |
很快就下载完毕
然后初始化ts环境
|-----------|------------------------------|
| 1 | hljs shell tsc --init |
可以看到多出了ts配置文件
我们可以在这里看到全部配置，我们可以手动对齐进行更改
也可以直接使用官方提供的配置
|------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | hljs json { "compilerOptions": { "outDir": "./built/", "sourceMap": true, "strict": true, "noImplicitReturns": true, "module": "es2015", "moduleResolution": "node", "target": "es5" }, "include": [ "./src/**/*" ] } |
然后我们再新建一个webpack.config.js到根目录下：
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | hljs json var path = require('path') var webpack = require('webpack') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { entry: './src/index.ts', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax', } // other vue-loader options go here } }, { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] }, resolve: { extensions: ['.ts', '.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map', plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin() ] } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) } |
再到package.json中添加构建配置
|------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | hljs json { "devDependencies": { "css-loader": "^6.5.1", "ts-loader": "^9.2.6", "typescript": "^4.5.4", "vue": "^2.6.14", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.14", "webpack": "^5.65.0", "webpack-cli": "^4.9.1" }, "scripts": { "build": "webpack", "test": "echo \"Error: no test specified\" && exit 1" } } |
我尝试构建，但发现以下错误
报错日常了属于是，仔细看，它说：
|---------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | hljs shell D:\file\projects\vue-ts-demo>cnpm run build > @ build D:\file\projects\vue-ts-demo > webpack [webpack-cli] 无效的 配置 对象. Webpack 已经 被 序列化了 使用 一个 配置 类 为 并 不 匹配 它的 API 模式. - configuration.devtool 应该 满足 表达式 "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". 突破 变更 自从 webpack 5: 这个 devtool 选项 变得 更加 严格. Please strictly follow the order of the keywords in the pattern. npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ build: `webpack` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\achao\AppData\Roaming\npm-cache\_logs\2022-01-03T04_44_20_952Z-debug.log |
所以我们将webpack.config.js中的configuration.devtool改为表达式中的eval-nosources-cheap-module-source-map
再来，发现报错变了
它说是找不到这个文件
那我们新建一个，这就是我们的主要ts文件
|---------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | hljs typescript // src/index.ts import Vue from "vue"; let v = new Vue({ el: "#app", template: ` <div> <div>Hello {{name}}!</div> Name: <input v-model="name" type="text"> </div>`, data: { name: "World" } }); |
添加完成之后我们再次构建，发现成功构建啦！
|-----------------|-------------------------------------------------------------------------|
| 1 2 3 4 | hljs shell # 编译 cnpm run build # 编译并热更新 npm run build -- --watch |
这里还有个警告，说我们缺少了mode属性
我们顺便加上
警告消失
接下来我们添加一个组件到src/components下
|------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | hljs typescript // src/components/Hello.ts import Vue from "vue"; export default Vue.extend({ template: ` <div> <div>Hello {{name}}{{exclamationMarks}}</div> <button @click="decrement">-</button> <button @click="increment">+</button> </div> `, props: ['name', 'initialEnthusiasm'], data() { return { enthusiasm: this.initialEnthusiasm, } }, methods: { increment() { this.enthusiasm++; }, decrement() { if (this.enthusiasm > 1) { this.enthusiasm--; } }, }, computed: { exclamationMarks(): string { return Array(this.enthusiasm + 1).join('!'); } } }); |
在index.ts中引用
|------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | hljs typescript // src/index.ts import Vue from "vue"; import HelloComponent from "./components/Hello"; let v = new Vue({ el: "#app", template: ` <div> Name: <input v-model="name" type="text"> <hello-component :name="name" :initialEnthusiasm="5" /> </div> `, data: { name: "World" }, components: { HelloComponent } }); |
注意到此为止我们都是使用ts文件进行编写vue代码，如果我们需要使用vue文件，则需要在src下新建vue-shims.d.ts
|---------------------|--------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | hljs typescript // src/vue-shims.d.ts declare module "*.vue" { import Vue from "vue"; export default Vue; } |
我们的组件就可以改为Hello.vue
|---------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | hljs vue <!-- src/components/Hello.vue --> <template> <div> <div class="greeting">Hello {{name}}{{exclamationMarks}}</div> <button @click="decrement">-</button> <button @click="increment">+</button> </div> </template> <script lang="ts"> import Vue from "vue"; export default Vue.extend({ props: ['name', 'initialEnthusiasm'], data() { return { enthusiasm: this.initialEnthusiasm, } }, methods: { increment() { this.enthusiasm++; }, decrement() { if (this.enthusiasm > 1) { this.enthusiasm--; } }, }, computed: { exclamationMarks(): string { return Array(this.enthusiasm + 1).join('!'); } } }); </script> <style> .greeting { font-size: 20px; } </style> |
index.ts中HelloComponent我再给个后缀
|------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | hljs typescript // src/index.ts import Vue from "vue"; import HelloComponent from "./components/Hello.vue"; let v = new Vue({ el: "#app", template: ` <div> Name: <input v-model="name" type="text"> <hello-component :name="name" :initialEnthusiasm="5" /> </div> `, data: { name: "World" }, components: { HelloComponent } }); |
我们使用cnpm run build生成的build.js我们可以放到一个html中使用一下，看看效果
|------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 | hljs html <!doctype html> <html> <body> <div id="app"></div> </body> <script src="./dist/build.js"></script> </html> |
效果如下：
但这和我们一般vue开发还有点差别，我们开发时应该还有热重载...
我们去修改下webpack.config.js
然后重新运行cnpm run build -- --watch
然后我们打开页面http://127.0.0.1:8848/vue-ts-demo/index.html
我们修改后再次保存，就可以实时更新了
