vue-cli3构建ts项目
2019-08-14 10:27:57来源:博客园 阅读 ()
1、构建项目
vue create xxx
上面的第一条,也就是 aaa 这一个选项在你第一次创建项目的时候是并不会出现的,只有你第一次创建完成项目后回提示你保存为默认配置模板,下次新建项目的时候就可以使用你选用的配置快速新建项目了,不需要再重新选择配置项目了。
第二条选项便是 vue cli 3 默认的项目模板,包含 babel 和 eslint。
第三条选项便是自主选择你项目所需的配置。
这里由于默认模板没有啥展示的必要所以我们便选择手动配置。
选择项目配置:
这里我们可以选择我们需要的配置选项,选择完成后回车进入下一步。
在选择功能后,会询问更细节的配置
TypeScript:
-
是否使用class风格的组件语法:Use class-style component syntax?
-
是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?
Router:
1.是否使用history模式:Use history mode for router?
CSS Pre-processors:
-
选择CSS 预处理类型:Pick a CSS pre-processor
Linter / Formatter
-
选择Linter / Formatter规范类型:Pick a linter / formatter config
-
选择lint方式,保存时检查/提交时检查:Pick additional lint features
Testing
-
选择Unit测试方式
-
选择E2E测试方式
选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
创建成功。
2、修改配置
vue-cli3脚手架生成项目目录说明
│ .browserslistrc │ .gitignore │ .postcssrc.js // postcss 配置 │ babel.config.js │ package.json // 依赖 │ README.md // 项目 readme │ tsconfig.json // ts 配置 │ tslint.json // tslint 配置 │ vue.config.js // webpack 配置(~自己新建~) │ yarn.lock │ ├─public // 静态页面 │ │—favicon.ico │ │—index.html │ ├─src // 主目录 │ ├─assets // 静态资源 │ │ logo.png │ │ │ ├─components │ │ HelloWorld.vue │ │ │ │─views // 页面 │ │ About.vue │ │ Home.vue │ │ │ │ App.vue // 页面主入口 │ │ │ │ main.ts // 脚本主入口 │ │ │ ├─router // 路由配置 │ │ index.ts │ │ │ │ registerServiceWorker.ts // PWA 配置 │ │ │ │ shims-tsx.d.ts │ │ shims-vue.d.ts │ │ │ │ │ ├─store // vuex 配置 │ │ index.ts │ │ │ ├─typings // 全局注入(~自己新建~) │ │ │ ├─utils // 工具方法(axios封装,全局方法等)(~自己新建~) │ │ └─tests // 测试用例 ├─e2e │ ├─plugins │ │ index.js │ │ │ ├─specs │ │ test.js │ │ │ └─support │ commands.js │ index.js │ └─unit HelloWorld.spec.ts
1、在.browserslistrc文件中添加
last 3 ie versions, not ie <= 8
其它配置,请去https://github.com/browserslist/browserslist。npx browserslist
在项目目录中运行以查看查询选择了哪些浏览器
2、tslint配置
// 关闭console "no-console": [true, "log", "dir", "table"] // tslint的函数前后空格: "space-before-function-paren": ["error", { "anonymous": "always", "named": "always", "asyncArrow": "always" }] // tslint分号的配置: "semicolon": [true, "never"]
其它规则:https://palantir.github.io/tslint/rules/
3、路由处理逻辑(登录验证、拦截等)
// main.ts文件 router.beforeEach((to: any, from: any, next: any) => { if (to.name === 'login') { next({name: 'home/index'}) } else { next() } })
4、axios改造
npm i axios --save
src下新建axios.d.ts axios.config.ts文件
//axios.config.ts
import axios, { AxiosInstance } from 'axios' declare module 'Vue/types/vue' { interface Vue { $axios: AxiosInstance } }
// main.ts文件
import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$axios = axios;
/**
* 创建 axios 实例
*/
const service = axios.create({
timeout: 3000,
baseURL: 'http://xxx',
});
/**
* req 拦截器
*/
service.interceptors.request.use((config: object): object => {
return config
}, (error: any): object => {
return Promise.reject(error)
});
/**
* res 拦截器
*/
service.interceptors.response.use((response: any) => {
const res = response.data;
if (res.error) {
if (process.env.NODE_ENV !== 'production') {
console.error(res);
}
return Promise.reject(res);
}
return Promise.resolve(res);
});
// main.ts
import './axios.config';
4、store改造
├── index.html
├── main.js
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.ts # 我们组装模块并导出 store 的地方
├── actions.ts # 根级别的 action
├── mutations.ts # 根级别的 mutation
└── modules
├── cart.ts # 购物车模块
使用:
- 使用
module
形式 - 全局的一些操作,方法,放入
store
中,业务逻辑尽量少放,项目全局方法可以放入。例如:cookie
,global cache
action(异步)
: api的操作, 调用方式:this.$store.dispatch(functionName, data)
mutations(同步)
: dom相关操作,方法名一般使用常量,
调用方式: this.$store.commit(mutationsName, data)
this.$store.getters[XXX] => this.$store.getters[namespaced/XXX] this.$store.dispatch(XXX, {}) => this.$store.dispatch(namespaced/XXX, {}) this.$store.commit(XXX, {}) => this.$store.commit(namespaced/XXX, {})
//store/index.ts import Vue from 'vue'; import Vuex from 'vuex'; import cart from './modules/cart'; Vue.use(Vuex); export default new Vuex.Store({ modules: { cart, }, });
// cart.ts import {ActionContext} from 'vuex'; export interface State { token: string; } const state: State = { token: '', }; // getters const getters = { toUpperToken: (state: State) => { return state.token.toUpperCase(); }, }; // actions const actions = { setTokenAsync({ commit }: ActionContext<State, State>, payload: any) { setTimeout(() => { commit('setToken', payload); }, 1000); }, }; // mutations const mutations = { setToken(state: State, payload: any) { state.token = payload; }, }; export default { namespaced: true, state, getters, actions, mutations, };
5、vue.config.js配置
https://cli.vuejs.org/zh/config/#vue-config-js所列出的属性,可以直接配置。其它属性可以通过configureWebpack、chainWebpack配置。
原文链接:https://www.cnblogs.com/gxp69/p/11302095.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- nodejs的express自动生成项目框架的方法 2020-02-20
- Javascript的&&和||的另类用法 2020-01-07
- js判断文本框剩余可输入字数的方法 2019-12-13
- Jquery 快速构建可拖曳的购物车DragDrop 2019-09-30
- 前端下载图片 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash