安裝vuecli3
npm install -g @vue/cli
# OR
yarn global add @vue/cli
創建項目
vue create project-typescript
手動選擇特性
選擇babel、ts、router、vuex、css預編譯器
這裏我們使用基於類的組件
選擇sass編譯器
eslint規則
獨立的配置文件
配置
在App.vue中新增路由
<div id="app">
<router-view></router-view>
</div>
設置Viewport 的適配
安裝
npm install autoprefixer postcss-px-to-viewport -D
添加vue.config.js文件
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtoviewport({
viewportWidth: 375,
}),
],
},
},
},
}
設置ts-import-plugin
按需加載組件
const tsImportPluginFactory = require('ts-import-plugin');
module.exports={
chainWebpack: (config) => {
// ts
config.module
.rule('ts')
.use('ts-loader')
.tap((options) => {
Object.assign(options, {
transpileOnly: true,
getCustomTransformers: () => ({
before: [
tsImportPluginFactory({
libraryName: 'vant',
libraryDirectory: 'es',
style: true,
}),
],
}),
compilerOptions: {
module: 'es2015',
},
});
return options;
});
},
}
新增api模塊
- 目錄
├── src// ├── api // 接口文件 ├── apple // 蘋果接口 ├── index.js // 入口文件
- 入口文件
const files = require.context('./', true, /\.js$/) const apiMap = {} files.keys().forEach(key => { if (key === './index.js') { return } Object.assign(apiMap, files(key).default?files(key).default:files(key)) }) export default apiMap
小技巧
- 不需轉viewport的設置兩遍
.tip{
font-family: PingFangSC-Regular;
font-size: 12px;
font-size: 12px;
color: #999999;
margin-bottom: 45px;
text-align: left;
}