1. 在项目中安装 composition-api 体验 vue3 新特性
npm install @vue/composition-api --save
# OR
yarn add @vue/composition-api
在使用任何 @vue/composition-api 提供的能力前，必须先通过 Vue.use() 进行安装
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
2.配置jsx
https://github.com/vuejs/jsx#installation
安装插件
yarn add babel-preset-vca-jsx --dev
配置 Babel
{
presets: ["vca-jsx", "@vue/cli-plugin-babel/preset"]
}
JSX/TSX 支持
对于 TSX 支持，请在你的项目中创建如下声明文件：
// file: shim-tsx.d.ts
import Vue, { VNode } from 'vue';
import { ComponentRenderProxy } from '@vue/composition-api';
declare global {
namespace JSX {
interface Element extends VNode {}
interface ElementClass extends ComponentRenderProxy {}
interface ElementAttributesProperty {
$props: any; // specify the property name to use
}
interface IntrinsicElements {
[elem: string]: any;
}
}
}
3.安装常用相关依赖
yarn add axios element-ui lodash dayjs
yarn add @types/lodash --dev //ts 类型
4.导入css 预处理器的一些公共的样式文件变量
导入css 预处理器的一些公共的样式文件变量，比如：variables , mixins , functions，避免在每个样式文件中手动的@import导入，然后在各个css 文件中直接使用 变量。
例如sass
//方法1
npm i style-resources-loader
npm i vue-cli-plugin-style-resources-loader
//方法2
vue add style-resources-loader
//vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果安装失败的话，就采用方法一
配置 具体见 https://github.com/yenshih/style-resources-loader
//在 vue-cli中的配置
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 这个是绝对路径,不能使用 alias中配置的别名路径，如@表示的src
path.resolve(__dirname, './src/style/params.less')
]
}
},
……
其他配置
……
}
//在普通webpack 中的配置, 可以同时使用 多个预处理器。
module.exports = {
// ...
module: {
rules: [{
test: /\.less$/,
use: ['style-loader', 'less-loader', 'less-loader', {
loader: 'style-resources-loader',
options: {
patterns: [ // 只有一条时也可以写成对象形式,
path.resolve(__dirname, 'path/to/scss/variables/*.less'),
path.resolve(__dirname, 'path/to/scss/mixins/*.less'),
],//字符串或数组，表示导入资源的路径，必须是绝对路径
injector: 'append' // 如果在样式文件之后导入就加此行配置
}
}]
}]
},
// ...
}
首先配置大漂亮 prettier
yarn add prettier --dev
yarn add eslint-plugin-prettier--dev
