- 安装
vue-i18n-
npm i vue-i18n@8.24.4
-
- 创建配置文件
- 创建
src/i18n/en.ts-
export default { morning: 'Good Morning', greeting: 'hello, {name}', }
-
- 创建
src/i18n/zh.ts-
export default { morning: '早上好', greeting: '你好, {name}', }
-
- 创建
src/i18n/index.ts- 引入之前创建的语言文件, 创建配置并默认暴露
VueI18n对象 -
import VueI18n from 'vue-i18n'; import Vue from 'vue'; import enUS from './en'; import zhCN from './zh'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: navigator.language, fallbackLocale: 'en', silentFallbackWarn: true, messages: { 'en-US': enUS, 'zh-CN': zhCN, }, }); export default i18n;
- 引入之前创建的语言文件, 创建配置并默认暴露
- 创建
main.ts-
import i18n from './i18n'; const app = new Vue({ router, store, i18n, render: (h) => h(App), }).$mount('#app'); // 可不选 window.onlanguagechange = function() { app.$i18n.locale = navigator.language; }
-
- 安装
-
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
-
- 创建
tailwindcss的配置文件-
npx tailwindcss init -p
- 📕
-p表示同时创建postcss的配置文件
- 📕
- 执行这个命令后, 根目录下会出现两个新的配置文件
tailwind.config.js和postcss.config.js
-
- 在
main.ts中引入样式文件-
import 'tailwindcss/tailwind.css'
-
- 接下来就可以使用样式啦
-
<small class="text-green-500">{{ $t('greeting', {name}) }}</small>
-
- 增加
tailwind.config.js的配置, 优化生产环境下的tailwindcss打包文件大小-
module.exports = { purge: [ './src/**/*.vue' ], content: [], theme: { extend: {}, }, plugins: [], }
-
- 安装
-
npm i element-ui -S
-
- 全局引入
- 创建
src/element/index.ts -
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
- 在
main.ts中引入上面的文件 -
import './element'
- 创建
- 按需引入
- 同样在
src/element/index.ts, 注释掉全局引入的内容 -
import Vue from 'vue'; import { Button, Input, Loading, MessageBox, Message } from 'element-ui'; Vue.use(Button); Vue.use(Input); Vue.use(Loading.directive); Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message;
- 安装
babel-plugin-component依赖, 借助这个插件, 我们可以只引入需要的组件, 以达到减小项目体积的目的 -
npm install babel-plugin-component -D
- 修改
babel.config.js -
// 注释的内容为修改之前 // module.exports = { // presets: [ // '@vue/cli-plugin-babel/preset' // ] // } module.exports = { presets: [ [ '@vue/cli-plugin-babel/preset', { module: false } ] ], plugins: [ [ 'component', { libraryName: 'element-ui', 'styleLibraryName': 'theme-chalk' } ] ] }
- 同样在
- 安装. 不仅安装
nprogress还要安装@types/nprogress哦-
npm i --save nprogress npm i --save-dev @types/nprogress
-
- 在
main.ts中引入NProgress和样式-
import NProgress from 'nprogress'; import 'nprogress/nprogress.css'
- 增加配置
-
NProgress.configure({ // 不出现右边转圈的小圆环 showSpinner: false, easing: 'ease', speed: 300, });
- 在切换路由时增加 NProgress 的显示与隐藏
-
router.beforeEach((to, from, next) => { NProgress.start(); next(); }) router.afterEach(() => { NProgress.done(); })
-