vue3 项目搭建以及使用

如果已经全局安装过旧版本的vue-cli

npm uninstall vue-cli -g   //yarn global remove vue-cli

然后安装

npm install -g @vue/cli   //yarn global add @vue/cli

检查vue版本号

vue -V

开始使用

vue create  <project name>

image.png

② default（babel，eslint）：默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包

③ Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

手动选择需要添加的配置项

 1 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 2 >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
 3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
 4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 5 ( ) Router // vue-router（vue路由）
 6 ( ) Vuex // vuex（vue的状态管理模式）
 7 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
 8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
 9 ( ) Unit Testing // 单元测试（unit tests）
10 ( ) E2E Testing // e2e（end to end） 测试

来源:https://www.cnblogs.com/coober/p/10875647.html

vue3中使用rem配置

image.png

创建一个util，rem.js

// rem等比适配配置文件
// 基准大小
const baseSize = 100
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

然后再main.js中引入

import './util/rem'

然后在babel.config.js中配置

const px2rem=require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})

// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

注册全局组件

import Alert from './Alert.vue'

const alert = {}
alert.install = (Vue) => {
  const Constructor = Vue.extend(Alert)
  const alertDom = new Constructor()
  alertDom.$mount(document.createElement('div'))
  document.body.appendChild(alertDom.$el)
  Vue.prototype.$alert = (text = '') => {
    alertDom.isShow = true
    return new Promise((resolve, reject) => {
      alertDom.text = text
      alertDom.ok = () => {
        alertDom.isShow = false
        resolve()
      }
    })
  }
}

export default alert

使用

在main.js中
import Alert from './components/common/Alert'
Vue.use(Alert)
      .use(Confirm)  //多个的时候

vue3 打包的时候需要在vue.config.js中添加一段代码

 publicPath: process.env.NODE_ENV === 'production' ? './' : '/'