vue-cli3+ts 脚手架

vue-cli3+ts 脚手架

安装流程

安装vue-cli3

// 全局安装vue-cli3
npm install -g @vue/cli

创建vue项目脚手架

// ts-temp是项目名
vue create tstemp 

选择创建模式，如图我门选择第二个自定义创建

手动选择特性（上下箭头移动，空格选择，回车完成）

接下来会选择一些配置（y-是，n-否）

1. 是否使用类样式组件语法？选择y

   

2. 是否将babel与typescript一起使用？选择y

2. 路由是否使用history模式（默认hash模式）？选择y

2. 选择css预编译方式，我选的是Sass/SCSS (with node-sass)

2. 选择一个语法检测配置，选择TSLint

2. 选择语法检查方式，选择Lint on save

2. 你希望babel、postcss、eslint等的配置文件放在哪？选择In dedicated config files

2. 将此保存为将来项目的预设？随意选，我选的n

最终效果图

cd tstemp
npm run serve

安装说明

结构说明：
public：一些公共的界面，图片，方法，如index.html主界面，我们也是在这里挂载我们的vue。可以自己生成一个，点进去看看就知道
assets：需要编译的静态资源放这里，如：图片、iconfont等。
components：组件，封装好的各种组件放这里，例如右侧滑出的弹窗，填写表单界面。
App.vue：开始的界面
main.ts：入口文件
store.ts: vuex

router.ts: 路由信息