vue(sass)配置typescript与elementUI

搜索个人公众号 前端交流 或者加个人学生党v q5281951 欢迎一起学习前端

dist打包目录 modules不用解释了 src是配置vue的执行目录 element是elementui的组件按需加载运行文件 api是运行typescript的文件调试 app.vue是vue组件 index是页面 index.js是执行目录 index.scss是sass编译css文件 .babelrc是配置babel package是依赖文件信息 tsconfig是配置typescript文件 webpack是配置webpack文件

关键的四个配置文件 babelrc

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", [ "component", { "libraryName":"element-ui", "styleLibraryName":"theme-chalk" } ]//除了这一块配置elementui之外其他的都是常用配置完全可以复制保留 ], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] } } }

package.json

{ "name": "vitevue", "version": "1.0.0", "main": "webpack.config.js", "scripts": { "dev": "webpack-dev-server --open --inline --progress --port 5050 --config webpack.config.js" }, "dependencies": { "vue": "^2.5.2" }, "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.24.1", "babel-plugin-transform-runtime": "^6.23.0", //上面五个属于常用配置babel "babel-plugin-component": "^1.1.1", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babel-plugin-transform-vue-jsx": "^3.5.0", //这个属于elementui配置按需加载 "css-loader": "^3.6.0", "element-ui": "^2.13.2", "file-loader": "^6.0.0", "html-webpack-plugin": "^4.3.0", "mini-css-extract-plugin": "^0.9.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "style-loader": "^1.2.1", "url-loader": "^4.1.0", //其他的就不多说了 "vue": "^2.6.11", "vue-loader": "^15.9.2",//如果用webpack4.0需要vue-loader14以上 "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^4.43.0", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.11.0", "sass-loader": "^8.0.2", "node-sass": "^4.14.1", "ts-loader": "^7.0.5", "typescript": "^3.9.5" }, "keywords": [], "author": "", "license": "ISC", "description": "" }

tsconfig文件

{ "compilerOptions": { "outDir": "./dist/", // 打包后文件的位置 "noImplicitAny": false, //是否弹出any类型警告 "module": "es6", "target": "es5", "allowJs": true // 是否允许引入js }, "include": [ "src" ] }

webpack

nst path=require("path") const HtmlWebpackPlugin=require("html-webpack-plugin")//用于把HTML页面放入内存 const vueload=require("vue-loader/lib/plugin") const minicss=require("mini-css-extract-plugin")//webpack4.0以后的打包css文件 const optimizecssassetswebpackplugin=require("optimize-css-assets-webpack-plugin")//压缩如果你使用ui组件库已经压缩的css就别必要了 //这个是vue-loader15.0以后的版本 const htmlplugin=new HtmlWebpackPlugin({ template:path.join(__dirname,'./src/index.html'),//源头文件 filename:"index.html"//生成首页的文件名称 }) const css=new minicss({//输出css独立文件 filename:"./css/[name].css", chunkFilename:"[name].css"//或者id }) module.exports={//webpack基于node构建的 entry: { index: './src/index.js' }, output: { filename: 'main.[hash:8].js',//通过热加载输出script文件挂载在目录与index.HTML一样 path: path.resolve(__dirname, 'dist') }, //production 提供了约定大于配置 约定打包文件是src/index ->dist/main plugins:[ htmlplugin, new vueload() , css ], module: {//所以第三方模块的配置规则 rules: [ {test:/\.vue$/,use:"vue-loader"}, { test: /\.js$/, loader: 'babel-loader', exclude:/node_modules/ }, { test: /\.scss$/, // use: [ // 'vue-style-loader', // 'css-loader', // 'sass-loader' // ] use:[{loader:minicss.loader}, { loader: 'css-loader', options: { modules: true }//开启css模块化 就不用使用scoped私有化了 },'sass-loader'] }, { test: /\.ts$/, loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/] }, exclude:/node_modules/ }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000 } }, // { test:/\.js|\jsx$/,use:[{loader:"babel-loader",options:{cacheDirectory:true}}],exclude:/node_modules/},//一个属性use:"babel-loader"两个是数组 // // { test:/\.css/,use:['style-loader','css-loader']}, {test:/\.css$/,use:[{loader:minicss.loader},'css-loader']}, // { test:/\.scss/,use:['style-loader', {loader: "css-loader", // options: {//这个是react的css模块化 // modules: { // localIdentName: "[path][name]-[local]-[hash:5]" // }//import css from '路径' console.log(css)会生成模块 // //这是react的处理办法 vue就是style里面写scoped // //支持id与class 控制台输出的模块是健对值形式 // }//css scss less一样的配置模块化 // }]}, { test:/\.(jpg|PNG|png|jpeg)/,use:[{loader:"url-loader",options:{ outputPath:"images/", limit:50//单位是B 大于这个会打包出来 }}]}, // { test:/.vue$/,use:[{loader:"vue-loader"}]}, ] }, devtool:"hidden-source-map",//inline把js打包在一个文件里面 hidden分离出来 eval也是分离 // optimization:{//代码分割 下面vendors就是分割代码之后(把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹 // splitChunks:{ // chunks:"all" // } // }, resolve: { // 将 `.ts` 添加为一个可解析的扩展名。 extensions: ['.ts', '.js']//这个配置react也需要['.jsx'] }, }

app.vue this.$style是获取导出的css模块化对象

<template> <div> <span :class="$style.red">hello world</span> <span>{{a}}</span> <span ref="a">ni hao</span> <el-button type="primary" size="small">按钮12</el-button> <button @click="but">点击</button> </div> </template> <script lang="ts"> import {aa,asy} from './api' export default { data() { return { a:1, red:"red" } }, created() { console.log(this.$style) }, mounted(){ console.log(this.$data) }, methods:{ but():void{ aa() } } } </script> <style lang="scss" module> @import './index.scss'; </style>

api.ts

export const aa:Function=function():void{ const arr:Array<any>=[1,2,3] console.log(arr[0]) } export const asy:Function=async function():Promise<any>{ function Show():Promise<any>{ return new Promise((resolve,rejects)=>{ resolve({ user:"liu", pass:"123" }) }) } return await Show() }

element的index.js 这个配置官网里面有

import Vue from 'vue'; import { Pagination,//分页 Dialog,//显示框 Autocomplete,//输入建议框 Dropdown,//下拉 DropdownMenu,//下拉菜单 DropdownItem,//菜单项 Menu,//菜单导航 Submenu,//导航下拉 MenuItem,//下拉项 MenuItemGroup,//下拉项组 Input,//输入框 InputNumber,//数字输入框 Radio,//单选 RadioGroup,//单选组 RadioButton,//单选按钮 Checkbox,//复选框 CheckboxButton,//复选框 CheckboxGroup,//复选组 Switch,//开关 Select,//下拉选择 Option,//下拉选项 OptionGroup,//选择组合 Button,//按钮 ButtonGroup,//按钮组合 Table,//表格 TableColumn,//表格列循环使用 DatePicker,//日期选择器 TimeSelect,//下拉选择 TimePicker,//时间选择器 Popover,//类型dialog的框 可以嵌套更简单 Tooltip,//也差不多弹出框 Breadcrumb,//面包屑 BreadcrumbItem,//面包屑选择项 Form,//表单 FormItem,//表单项 Tabs,//标签分页 TabPane,//标签分项 Tag,//标签 Tree,//树形 Alert,//警告框 Slider,//滑动条 Icon,//图标 Row,//hang24 Col,//占一行几分之几 Upload,//上传文件 Progress,//进度条 Spinner,// Badge,//徽章 Card,//卡片 Rate,//评论 Steps,//步骤 Step,//每一步 Carousel,//下拉建议框 CarouselItem,//下拉建议项 Collapse,//折叠项 CollapseItem,//折叠单项 Cascader,//联级选择器 ColorPicker,//颜色选择器 Transfer,//穿梭 Container,//容器不包括header footer 就是水平 Header,//头 Aside,//Bian Main,//bian Footer,//脚 Timeline,//时间线 TimelineItem,//时间线选择项 Link,//href Divider,//分割线 Image,//图片 Calendar,//日历 Backtop,//头顶 PageHeader,//页头 CascaderPanel,// Loading,//加载 MessageBox,//显示框 confirm alert prompt Message,//显示 Notification,//显示框 都有自定义内容 Popconfirm,// InfiniteScroll,//无尽下拉 Drawer } from 'element-ui'; Vue.use(Drawer) Vue.use(InfiniteScroll) Vue.use(Popconfirm) Vue.use(Pagination); Vue.use(Dialog); Vue.use(Autocomplete); Vue.use(Dropdown); Vue.use(DropdownMenu); Vue.use(DropdownItem); Vue.use(Menu); Vue.use(Submenu); Vue.use(MenuItem); Vue.use(MenuItemGroup); Vue.use(Input); Vue.use(InputNumber); Vue.use(Radio); Vue.use(RadioGroup); Vue.use(RadioButton); Vue.use(Checkbox); Vue.use(CheckboxButton); Vue.use(CheckboxGroup); Vue.use(Switch); Vue.use(Select); Vue.use(Option); Vue.use(OptionGroup); Vue.use(Button); Vue.use(ButtonGroup); Vue.use(Table); Vue.use(TableColumn); Vue.use(DatePicker); Vue.use(TimeSelect); Vue.use(TimePicker); Vue.use(Popover); Vue.use(Tooltip); Vue.use(Breadcrumb); Vue.use(BreadcrumbItem); Vue.use(Form); Vue.use(FormItem); Vue.use(Tabs); Vue.use(TabPane); Vue.use(Tag); Vue.use(Tree); Vue.use(Alert); Vue.use(Slider); Vue.use(Icon); Vue.use(Row); Vue.use(Col); Vue.use(Upload); Vue.use(Progress); Vue.use(Spinner); Vue.use(Badge); Vue.use(Card); Vue.use(Rate); Vue.use(Steps); Vue.use(Step); Vue.use(Carousel); Vue.use(CarouselItem); Vue.use(Collapse); Vue.use(CollapseItem); Vue.use(Cascader); Vue.use(ColorPicker); Vue.use(Transfer); Vue.use(Container); Vue.use(Header); Vue.use(Aside); Vue.use(Main); Vue.use(Footer); Vue.use(Timeline); Vue.use(TimelineItem); Vue.use(Link); Vue.use(Divider); Vue.use(Image); Vue.use(Calendar); Vue.use(Backtop); Vue.use(PageHeader); Vue.use(CascaderPanel); 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;//渲染HTML是很危险的，不要把用户提交的内容放进去

scss文件

$a:1px solid red; span{ border:$a; width: 100px; height: 100px; display: inline-block; } .red{ color:red; }