搭建Vue-TypeScript项目(一)

搭建Vue-TypeScript项目(一)

这是一个系列文章，一步步搭建vue项目，包含vue-cli3，axios，vuex，vue-router，type-script等等
假设你有了vue基础,并且学会了基础的typescript语法

安装

1.node版本

node版本要求node>=8.9以上，使用以下命令查看node版本

node -v

2、vue-cli3安装

（1）若已全局安装vue-cli(低版本1或2)，需先卸载(千万记得卸载，不然后悔)

npm uninstall vue-cli -g

（2）全局安装 vue-cli3.0

#安装
npm install -g @vue/cli`
#查看版本
vue --version

3.创建项目

（1）创建项目

vue create myapp

#若本地是国外npm换源，会提示换taobao源
Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? Yes

（2）选择创建方式

// 默认预设配置 babel，eslint
default (babel， eslint)
// 手动选择配置（我们要选择这种方式）
Manually select features

（3）手动配置

1.Babel //是否使用babel编译代码，废话当然用
2.TypeScript //是否使用TypeScript，看文章标题
3.Progressive Web App (PWA) Support //支持渐进式网页应用程序
4.Router //路由管理器
5.Vuex //状态管理模式（构建一个中大型单页应用时）
6.CSS Pre-processors //css预处理
7.Linter / Formatter //代码风格、格式校验
8.Unit Testing // 单元测试
9.E2E Testing // 即端对端测试

空格选中，上下键切换，回车确认，具体配置见下图

demo

1、 TypeScript
是否使用class风格的组件语法，是
Use class-style component syntax?

是否使用babel做转义，是
Use Babel alongside TypeScript for auto-detected polyfills?

2、Router
路由使用历史模式，一般实际项目要使用history
Use history mode for router? (Requires proper server setup for index fallback in production) 

3、CSS Pre-processors css预处理，我用的sass
Pick a CSS pre-processor (PostCSS， Autoprefixer and CSS Modules are supported by default)  
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

4、Linter / Formatter 代码风格、格式校验，我用的tslint
  TSLint
  仅错误预防
  ESLint with error prevention only
  Airbnb配置
  ESLint + Airbnb config
  标准配置
  ESLint + Standard config
  Prettier配置（常用）
  ESLint + Prettier

5、选择lint方式：Pick additional lint features，选择保存时检查
保存时检查
Lint on save
提交时检查
Lint and fix on commit

6、Unit Testing 单元测试，不使用
Mocha + Chai
Jest

7、E2E Testing E2E（End To End）即端对端测试，不使用
Cypress (Chrome only) 
Nightwatch (Selenium-based)

8、选择 Babel，PostCSS， ESLint 等自定义配置的存放位置，在package.json里配置
在单独的配置文件中
In dedicated config files
在package.json
In package.json

9、将此作为将来项目的预置吗？是的，下次可以直接用
Save this as a preset for future projects?
10、项目配置名称，设置配置名称为：my
Save preset as：my

11、回车构建项目,具体选项看下图

![demo](https://raw.githubusercontent.com/dongyankun/imgBox/master/day1/2.jpg)

3.运行项目

#进入项目文件夹
cd myapp
#运行项目
npm run serve