vue3|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
文章图片
image.png ② default（babel，eslint）：默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包
【vue3|vue3 项目搭建以及使用】③ Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包
手动选择需要添加的配置项
1 ? Check the features needed for your project: (Pressto select,to toggle all, 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' ? './' : '/'
推荐阅读
- 六步搭建ES6语法环境
- 17|17 关山松 第二课作业#公众号项目# D20
- RxJava|RxJava 在Android项目中的使用（一）
- Hacking|Hacking with iOS: SwiftUI Edition - SnowSeeker 项目（一）
- 靠QQ月入上万灰色暴利偏门的项目
- spring|spring boot项目启动websocket
- vuex|vuex 基础结构
- (1)redis集群原理及搭建与使用(1)
- 桁架搭建有什么价值（）
- 区块链开发平台（以太坊）