前言
这篇文章是关于vue3.0+typeScript+element-ui+webpack的文章，适合初学者，
浏览完成可能需要20分钟左右，建议先自己尝试，不会的遇到问题后可以再来具体的看一下。
1、安装
先卸载vue2.0的脚手架：npm uninstall vue-cli -g，全局卸载
安装vue3.0的脚手架： npm install -g @vue/cli，全局安装
image.png
2、创建项目：vue create my_project；选择第二个(Manually select features)，下箭头，回车
image.png
进入下个页面，使用上下箭头跳到选项中，使用空格键选中。以下选中：
image.png
进入下一个选项，按照下面图片进行选择：
image.png
安装完成后，使用cd 创建的文件夹（比如我的：cd my_project）,然后使用npm run serve启动运行项目。
如果想要修改运行配置，可以修改package.json文件中的scripts进行更改。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
// 增加一个dev为例
"dev": "vue-cli-service serve"
},
3、项目自己配置vue.config.js，如下(我这里只是简单的入门配置，满足一般需求)：
（这里需要注意的是vue3.0中没有vue.config.js文件需要自己创建，创建地址与tsconfig.json同级别）
配置之前安装一个：
cnpm install @vue/cli-plugin-typescript --save-dev
module.exports = {
// 项目部署的基础路径
// 我们默认假设你的应用将会部署在域名的根部，
// 比如 https://www.my-app.com/
// 如果你的应用时部署在一个子路径下，那么你需要在这里
// 指定子路径。比如，如果你的应用部署在
// https://www.foobar.com/my-app/
// 那么将这个值改为 `/my-app/`
// baseUrl: '/Reader/dist/', /*这个是我存放在github在线预览的项目*/
// 将构建好的文件输出到哪里
outputDir: 'dist',
// 放置静态资源的地方 (js/css/img/font/...)
assetsDir: 'public',
// 用于多页配置，默认是 undefined
pages: {
index: {
// 入口文件
entry: 'src/main.ts', /*这个是根入口文件*/
// 模板文件
template: 'public/index.html',
// 输出文件
filename: 'index.html',
// 页面title
title: 'Index Page'
},
// 简写格式
// 模板文件默认是 `public/subpage.html`
// 如果不存在，就是 `public/index.html`.
// 输出文件默认是 `subpage.html`.
subpage: 'src/main.ts' /*注意这个是*/
},
// 是否在保存的时候使用 `eslint-loader` 进行检查。
// 有效的值：`ture` | `false` | `"error"`
// 当设置为 `"error"` 时，检查出的错误会触发编译失败。
lintOnSave: true,
// 使用带有浏览器内编译器的完整构建版本
// 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时
runtimeCompiler: false,
// babel-loader 默认会跳过 node_modules 依赖。
// 通过这个选项可以显式转译一个依赖。
transpileDependencies: [/* string or regex */],
// 是否为生产环境构建生成 source map？
productionSourceMap: true,
// 调整内部的 webpack 配置。
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
chainWebpack: config => {
config.module
.rule('tsx')
.use('ts-loader')
.loader('ts-loader')
.tap(options => {
return Object.assign(options || {}, { allowTsInNodeModules: true });
})
},
// 公共路径
publicPath: './',
configureWebpack: () => {},
// CSS 相关选项
css: {
// 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
// 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
extract: true,
// 是否开启 CSS source map？
sourceMap: false,
// 为预处理器的 loader 传递自定义选项。比如传递给
// sass-loader 时，使用 `{ sass: { ... } }`。
loaderOptions: {},
// 为所有的 CSS 及其预处理文件开启 CSS Modules。
// 这个选项不会影响 `*.vue` 文件。
modules: false
},
// 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
// 在多核机器下会默认开启。
parallel: require('os').cpus().length > 1,
// PWA 插件的选项。
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
pwa: {},
// 代理配置(也就是本地环境如何才能请求到服务器的数据)
devServer: {
// 判断条件什么时候打开、或者什么条件打开
open: true,
// 本地
host: "localhost",
// 本地端口
port: 8080, //8080,
// 是不是https请求
https: false,
hotOnly: false,
proxy: {
// 设置代理
// /ts代表一个普通的字符串可以是/api或者其他，
"/ts": {
// 代理到哪个地址
target: "http://11.11.11.111:8080/",
// 开启代理：在本地创建一个虚拟服务器，发送请求、接受数据，不存在跨域问题。
changeOrigin: true,
ws: true,
// 匹配所有的/ts替换为空
pathRewrite: {
"^/ts": ""
}
}
},
before: app => {}
},
// 三方插件的选项
pluginOptions: {
// ...
}
}
4、我们先要创建一个units文件（与src同级别，在它的里边创建一个文件request.ts）接下来我们配置封装request、axios，这里跟👆的配置代理有关联。这里的baseURL（公共前缀，没有它你就需要给每个接口都加上‘/ts’,很麻烦哦。）就是上面的代理的代表字符串。
import axios from 'axios';
import { Message } from "element-ui";
const server = axios.create({
baseURL: '/ts', // 请求前缀
withCredentials: true, // 请求是否携带凭证
timeout: 5000 // 请求超时时间
})
// 请求拦截
server.interceptors.request.use((config: any) => {
return config;
}, (error: any) => {
return Promise.reject(error);
});
// 响应拦截
server.interceptors.response.use((response: any) => {
// 根据返回code，设置弹框
if (response.data.code !== 0) {
Message({
type: 'error',
message: response.data.message
});
}
return response;
})
// 导出axios封装
export default server;
5、好多人都遇到过这个问题，那就是如何使用this.$message.如何在this下增加属性。代码如下：
在mian.ts文件中
import Vue from 'vue';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';
import Element from 'element-ui';
import {Message} from 'element-ui';
// 这里一定要引入element-UI的css文件否则，你只能看见原生的字体，而不是弹框。这样就可以使用this.$message()了。
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element);
Vue.prototype.$message = Message;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
还少一个配置：
在shims-vue.d.ts文件中
import Vue from 'vue';
import VueRouter, {Route} from 'vue-router';
declare module '*.vue' {
export default Vue
}
declare module 'vue/types/vue' {
interface Vue {
$router: VueRouter;
$route: Route;
// 声名一下$Message为任意类型。
$Message: any
}
}
6、接下来就是在项目中如何使用typeScript了。typeScript在一个vue中，template和style没有变化，这里只说一下script中的变化，在App.vue中使用的时候我遇到一个问题，无法获取this实例，无法使用vue的生命周期。
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
// 这里的component是必须的，没有的话，就没有生命周期，无法获取this实例
@Component({
components: {}
})
// 导出app继承Vue
export default class app extends Vue{
// private声名一个变量activeIndex为字符串类型值为‘1’
private activeIndex: string = '1';
// 这个是计算属性computed的使用。
get Routers() :Array<object> {
return this['$router'].options.routes;
}
// 生命周期
mounted() :void {
console.log(this);
this.EV();
}
EV() {
console.log(1);
}
}
</script>
下篇文章我打算出一篇关于typeScirpt的基础使用的文章，巩固一下知识。
没人看，不重要，这个是写给我自己的，怕我以后会忘了，怎么使用，还要查，太麻烦了。这里有好多图片是抄袭别人的，在搭建项目中遇到的问题是自己的。
最后推荐一个vue+typescript网址，有成熟的搭建好的项目。
[https://panjiachen.github.io/vue-element-admin-site/zh/guide/
]
