搭建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 // 即端对端测试
空格选中,上下键切换,回车确认,具体配置见下图
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