使用vue-cli3构建Typescript项目
import 和 require
require: 以同步的方式检索其他模块的导出 (开发)
import: 动态地加载模块 (生产)
相关文档：module methods
vue-cli3
vue create project-name
vue-cli3配置, 生成目录结构：
│ .browserslistrc
│ .gitignore
│ .postcssrc.js // postcss 配置
│ babel.config.js
│ cypress.json
│ package.json // 依赖
│ README.md
│ tsconfig.json // ts 配置
│ eslint.json // eslint 配置
│ yarn.lock
│
├─public // 静态页面
│ │ favicon.ico
│ │ index.html
│ │ manifest.json
│ │ robots.txt
│ │
│ └─img
│ └─icons
│
├─src // 主目录
│ │ App.vue // 页面主入口
│ │ main.ts // 脚本主入口
│ │ registerServiceWorker.ts // PWA 配置
│ │ router.ts // 路由
│ │ shims-tsx.d.ts // 相关 tsx 模块注入
│ │ shims-vue.d.ts // Vue 模块注入
│ │ store.ts // vuex 配置
│ │
│ ├─assets // 静态资源
│ │ logo.png
│ │
│ ├─components // 组件
│ │ HelloWorld.vue
│ │
│ └─views // 页面
│ About.vue
│ Home.vue
│
└─tests // 测试用例
├─e2e
│ ├─plugins
│ │ index.js
│ ├─specs
│ │ test.js
│ └─support
│ commands.js
│ index.js
└─unit
HelloWorld.spec.ts
改造后的目录结构：
│ .browserslistrc
│ .gitignore
│ .postcssrc.js // postcss 配置
│ babel.config.js
│ cypress.json
│ package.json // 依赖
│ README.md // 项目 readme
│ tsconfig.json // ts 配置
│ eslint.json // eslint 配置
│ vue.config.js // webpack 配置
│ yarn.lock
│
├─public // 静态页面
│ │ favicon.ico
│ │ index.html
│ │ manifest.json
│ │ robots.txt
│ │
│ └─img
│ └─icons
├─scripts // 相关脚本配置
├─src // 主目录
│ │ App.vue // 页面主入口
│ │ main.ts // 脚本主入口
│ │ registerServiceWorker.ts // PWA 配置
│ │ shims-tsx.d.ts
│ │ shims-vue.d.ts
│ │
│ ├─assets // 静态资源
│ │ logo.png
│ │
│ ├─components
│ │ HelloWorld.vue
│ │
│ ├─filters // 过滤
│ ├─lib // 全局插件
│ ├─router // 路由配置
│ │ index.ts
│ │
│ ├─scss // 样式
│ ├─store // vuex 配置
│ │ index.ts
│ │
│ ├─typings // 全局注入
│ ├─utils // 工具方法(axios封装，全局方法等)
│ └─views // 页面
│ About.vue
│ Home.vue
│
└─tests // 测试用例
├─e2e
│ ├─plugins
│ │ index.js
│ │
│ ├─specs
│ │ test.js
│ │
│ └─support
│ commands.js
│ index.js
│
└─unit
HelloWorld.spec.ts
内容版权声明：除非注明，否则皆为本站原创文章。