安装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;
}