vue3.0+ts+element-plus多页签应用模板:项目搭建
目录
- 系列文章
- 一、安装vue-cli@4.5.x
- 二、创建项目
- 三、项目配置
- 四、IDE配置
- 五、vue.config.js配置
- 六、重置浏览器默认样式
系列文章
- vue3.0+ts+element-plus多页签应用模板:前言
- vue3.0+ts+element-plus多页签应用模板:项目搭建
- vue3.0+ts+element-plus多页签应用模板:vue-router与vuex
- vue3.0+ts+element-plus多页签应用模板:element-plus按需引入与动态换肤
- vue3.0+ts+element-plus多页签应用模板:如何优雅地使用Svg图标
- vue3.0+ts+element-plus多页签应用模板:侧边导航菜单(上)
- vue3.0+ts+element-plus多页签应用模板:侧边导航菜单(下)
- vue3.0+ts+element-plus多页签应用模板:多级路由缓存
- vue3.0+ts+element-plus多页签应用模板:头部工具栏(上)
- vue3.0+ts+element-plus多页签应用模板:头部工具栏(中)
- vue3.0+ts+element-plus多页签应用模板:头部工具栏(下)
一、安装vue-cli@4.5.x
工欲善其事,必先利其器,我们需要安装vue-cli来创建项目(别问为什么,问就是简单、便捷、高效)。但是,在安装之前,首先要保证你的电脑里有12以上的node.js,不然你直接运行npm是会报错的。至于安装node的方案,请自行网上搜索。
接下来,我们打开电脑上的终端软件(windows用powershell或者cmd),输入以下代码并回车:
npm install -g @vue/cli
如果觉得下载的时候网速太慢,可以切换一下淘宝源(分两次执行):
npm config set registry https://registry.npm.taobao.org
npm i mirror-config-china -g
二、创建项目
好了,接下来我们可以开始创建项目了:
vue create multi-tabs
首先你会看见这样的界面:
这里我们选择最下面的Manually select features
,然后回车
这里选择TypeScript
,上下键切换高亮行,空格选中,回车确认。这里的Router和Vuex不用选,后面我们可以自己安装
这里就是选择我们vue的版本了,选择下面的3.x
接下来会有几个连续的问题:
- Use class-style component syntax? (y/N) 回答:n
- Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 回答:n
- Pick a linter / formatter config 回答:ESLint + Prettier | Lint on save
- Where do you prefer placing config for Babel, ESLint, etc.? 回答:In dedicated config files
- Save this as a preset for future projects? 回答:y,然后自己起个名,下次就可以直接用了
然后回车,项目就会开始自动构建了,当显示这样的界面的时候,就是构建成功了:
三、项目配置
为了有更好的开发体验,以及更规范的代码,我们在项目中引用了ESLint + Preitter,所以,我们现在就要来配置一下这两个插件:
打开根目录下的.eslintrc.js
,用下面的代码覆盖:
/*** .eslintrc.js ***/
module.exports = {root: true,env: {node: true},extends: ['plugin:vue/vue3-essential','eslint:recommended','@vue/typescript/recommended','@vue/prettier','@vue/prettier/@typescript-eslint'],parserOptions: {ecmaVersion: 2020},rules: {quotes: ['error', 'single'],'comma-dangle': ['error', 'never'],'prettier/prettier': ['error',{vueIndentScriptAndStyle: false,endOfLine: 'auto'}],'no-undef': 'off','space-before-function-paren': 'off','no-use-before-define': 'off','no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-unused-vars': ['error',{argsIgnorePattern: '^h$',varsIgnorePattern: '^h$'}],'@typescript-eslint/ban-ts-ignore': 'off','@typescript-eslint/explicit-function-return-type': 'off','@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/no-var-requires': 'off','@typescript-eslint/no-empty-function': 'off','@typescript-eslint/no-use-before-define': 'off','@typescript-eslint/ban-ts-comment': 'off','@typescript-eslint/ban-types': 'off','@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/explicit-module-boundary-types': 'off','@typescript-eslint/no-unused-vars': ['error',{argsIgnorePattern: '^h$',varsIgnorePattern: '^h$'}],'vue/require-default-prop': 'off','vue/custom-event-name-casing': 'off','vue/comment-directive': 'off','vue/singleline-html-element-content-newline': 'off','vue/html-self-closing': 'off','vue/max-attributes-per-line': 'off'}
}
在项目根目录创建文件:.prettierrc
,并输入以下内容
{"eslintIntegration": true,"printWidth": 100,"tabWidth": 2,"useTabs": false,"semi": false,"vueIndentScriptAndStyle": false,"singleQuote": true,"quoteProps": "as-needed","bracketSpacing": true,"trailingComma": "none","jsxBracketSameLine": false,"jsxSingleQuote": false,"arrowParens": "always","insertPragma": false,"requirePragma": false,"proseWrap": "never","htmlWhitespaceSensitivity": "strict","endOfLine": "auto"
}
接着打开根目录下的tsconfig.json
,用下面的代码覆盖:
{"compilerOptions": {"target": "es5","module": "esnext","strict": true,"jsx": "preserve","importHelpers": true,"moduleResolution": "node","skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"allowJs": true,"sourceMap": false,"baseUrl": ".","types": ["webpack-env"],"paths": {"@/*": ["src/*"],"tslib": ["path/to/node_modules/tslib/tslib.d.ts"]},"lib": ["esnext", "dom", "dom.iterable", "scripthost"],"typeRoots": ["./src/typings", "./node_modules/@types"]},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],"exclude": ["node_modules"]
}
然后安装tslib:
npm i tslib --save-dev
这样,我们的项目就配置好了
四、IDE配置
我们选用的IDE是vscode(真的很好用)。然后安装以下插件:vetur, eslint, prettier,之后就可以进行愉快的开发了
五、vue.config.js配置
在根目录下新建文件vue.config.js
,并输入以下代码:
/*** vue.config.js ***/
const IS_DEV = process.env.NODE_ENV === 'development'
const CompressionPlugin = require('compression-webpack-plugin')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const path = require('path')const options = {// 是否开启eslint保存检测,有效值:ture | false | 'error'lintOnSave: IS_DEV,// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建productionSourceMap: false,// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)assetsDir: 'static',// 配置WebpackchainWebpack: (config) => {/*** 开发环境配置 ***/if (IS_DEV) {// 配置静态依赖config.plugin('hard-source-webpack-plugin').use(HardSourceWebpackPlugin)}/*** 生产环境配置 ***/if (!IS_DEV) {// 配置gzipconfig.plugin('compression-webpack-plugin').use(CompressionPlugin, [{algorithm: 'gzip',test: /\.(js|css)$/,threshold: 10240,deleteOriginalAssets: false,minRatio: 0.8}])}// 设置网站标题config.plugin('html').tap((args) => {args[0].title = '多页签系统模板'return args})// 映射路径config.resolve.alias.set('@', path.resolve('src'))}
}module.exports = options
安装compression-webpack-plugin@6.1.0
(安装最新版会警告没安装webpack5.1.0):
npm i compression-webpack-plugin@6.1.0 -D
安装hard-source-webpack-plugin
:
npm i hard-source-webpack-plugin -D
六、重置浏览器默认样式
新建src/assets/styles/reset.scss
:
* {box-sizing: content-box;
}body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
dl,
dt,
a,
input,
button,
textarea,
select {margin: 0;padding: 0;outline: none;
}html,
body {font-family: Microsoft Yahei, Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC,WenQuanYi Micro Hei, sans-serif;color: #333333;background-color: #ffffff;height: 100%;
}a {text-decoration: none;
}ul,
li {list-style: none;
}input {font: normal;
}input:focus,
a:focus {outline: none;
}input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;
}input[type='number'] {-moz-appearance: textfield;
}
同目录新建index.scss
:
@import './reset.scss';
然后在main.ts
中导入:
import '@/assets/styles/index.scss'
下一篇预告:vue3.0+ts+element-plus多页签应用模板:vue-router与vuex
vue3.0+ts+element-plus多页签应用模板:项目搭建相关推荐
- vue3.0+ts+element-plus多页签应用模板:element-plus按需引入与动态换肤
目录 系列链接 一.安装element-plus 二.按需引入 1. 为什么要按需引入? 2. 如何按需引入? 3. 验证是否引入成功 三.动态换肤 1. 制作自定义主题 2. 引入自定义主题 3. ...
- vue3.0+ts+element-plus多页签应用模板:多级路由缓存
目录 系列文章 一.先说点啥 1. 为啥需要路由缓存? 2. 怎么实现路由缓存? 二.路由扁平化 三.定义tag模块处理路由缓存 四.切换路由时加入缓存 五.使用keep-alive 系列文章 vue ...
- vue3.0+ts+element-plus多页签应用模板:侧边导航菜单(上)
目录 系列文章 一.先说点什么 二.从问题开始,侧边栏是干啥的? 三.封装组件之思路分析 四.封装菜单部分 1. MenuItem 2. ModuleMenu 系列文章 vue3.0+ts+eleme ...
- Vue3.0+TS+Element-plus实现(若依版后台管理系统)
附上源码地址: Vue3.0+TS+Element-plus 后台管理系统模板 准备工作 安装vue3.0,npm create vue3-project 选中这几项即可,不需要vuex, 我们自己封 ...
- vue 不识别svg_vue中引用svg,vue引入svg不显示,vue引用svg配置,vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
- 如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目 相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
- vue3.0 结合element ui 开发后台ui框架
vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run s ...
- 支持vue3.0+ts 的富文本记录
前言 用过很多的富文本,还是蛮喜欢鹅毛富文本,轻量级, 一般遇到富文本的案例,都会首先想到的是quill 目前vue3.0与react分裂两极,typescript霸占一方,javascript还在坚 ...
- vue3.0 + ts H5拍照组件
vue3.0 + ts H5拍照组件 实现了简单的拍照功能,拍照成功返回文件对象.(待更新,裁剪,缩放,旋转) 效果图 使用 通过npm下载 npm i wl-easy-ui 或者通过yarn add ...
最新文章
- 叶杰平入选、华人占4成,2020年ACM杰出科学家榜单出炉
- MYSQL学习01--MySQL基础知识
- Innodb锁系统 Insert/Delete 锁处理及死锁示例分析
- Python统计分析--- 5.统计法与随机梯度下降(SGD)
- 每天至少保证4个小时的学习时间
- NDK编译c包含C++头文件时,出现 error: unknown type name 'class' 的解决方法
- bzoj1625[Usaco2007 Dec]宝石手镯*
- VMware 12安装Mac OS X 10.11解决上网的问题
- Mediator(中介者)
- python牛顿迭代法求平方根_Python编程如何实现二分法及牛顿迭代法求平方根代码...
- 考研数学常见的函数图像
- Firefox 中文语言包安装方法
- GNOME 3 使用技巧
- 软件信息安全杂志《Information Security》2011年11月期下载
- MAC 软件安装打不开解决办法
- CAD的那些装逼技巧!
- Objective-C仿映客跑车动画
- 计算机软件ae常用英语,AE英文插件该怎么翻译?
- JS实现统一社会信用代码的效验(组织机构代码效验)
- SAP R/3 财务基本概念及集成性浅释 —— 主数据篇