Vue+ts 项目搭建教程

介绍

未来前端的发展，是逐步挺近企业级的开发业务，强类型的typescript已经越来越满足要求，普及使用起来。

安装项

今天给大家分享一个自动生成Vue+ts的项目目录的方法

操作	操作路径	命令
安装vue/cli	path	npm i -g @vue/cli
创建vue项目	path	vue create myVue（此处写你的项目名字）
安装vue/cli	path/myVue	vue add @vue/typescript
安装vuex	path/myVue	npm ivuex

生成的目录结构:

结构说明：
public：一些公共的界面，图片，方法，如index.html主界面，我们也是在这里挂载我们的vue。可以自己生成一个，点进去看看就知道
assets：需要编译的静态资源放这里，如：图片、iconfont等。
components：组件，封装好的各种组件放这里，例如右侧滑出的弹窗，填写表单界面。
model：放置自定义的类
store：用来存储数据的方法，比如此目录下的index.ts引入vuex，存储公共变量和共享方法。
App.vue：开始的界面
main.ts：入口文件
其他：其他的不是很重要，都是一些配置

运行

打开项目所在的文件夹，按shift+鼠标右键，在此处打开powershell窗口，或者在你常用的编译器里，在此处新建一个终端，运行命令即可。
注：必须提前装好node环境！

1.npm install
下载好依赖，直接运行命令即可
2.npm run serve
3.点击生成的链接，打开浏览器，你就可以看到你的第一个项目了

总结

到这里，vue+ts脚手架就搭建好了，同时也配置好了vuex
后续还会出更多vue+ts项目中遇到的坑和问题的解决。