用 webpack 创建 vue 项目
1、安装支持webpack 包
npm i -D webpack webpack-cli aspnet-webpack webpack-dev-middleware webpack-hot-middleware clean-webpack-plugin html-webpack-plugin
2、支持 babel ES2017
npm i -D @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime babel-loader
npm i @babel/runtime @babel/polyfill @babel/plugin-syntax-dynamic-import
配置为:
"babel": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"esmodules": false
}
}
]
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-syntax-dynamic-import"
]
}
3、支持各种文件类型加载
npm i -D cache-loader file-loader html-loader postcss-loader style-loader svg-sprite-loader text-loader url-loader
4、sass 文件类型
npm i -D css-loader node-sass sass-loader autoprefixer
5、element-ui 支持
npm i vue vuex vue-router element-ui axios
npm i -D vue-cli vue-loader vue-template-compiler
6、各种 vue 插件
npm i vue-grid-layout vue-i18n vue-json-tree-view vue-splitpane vue-router screenfull file-saver hotkeys-js dayjs
7、继续插件
npm i @d2-projects/d2-crud better-scroll clipboard-polyfill echarts nprogress lodash lowdb fuse.js flex.css js-cookie mockjs papaparse ua-parser-js xlsx particles.js
用 webpack 创建 vue 项目的更多相关文章
- Vue2+Webpack创建vue项目
相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...
- webpack 创建vue项目过程中遇到的问题和解决方法
目录 1 webpack简介 2 webpack实现多个输入输出多个html 3 webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面 ...
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- 离线webpack创建vue 项目
参考地址: https://blog.csdn.net/feinifi/article/details/104578546 画重点: // 需要带上参数--offline表示离线初始化. --offl ...
- 使用vue-cli创建vue项目
vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- 通过脚手架创建Vue项目
第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...
- Linux下创建vue项目
前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...
- VUE,基于vue-cli搭建创建vue项目
前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...
随机推荐
- flask之wtforms
本篇导航: wtforms组件的使用 自定义From组件 一.wtforms组件的使用 1.flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进 ...
- react_app 项目开发 (8)_角色管理_用户管理----权限管理 ---- shouldComponentUpdate
角色管理 性能优化(前端面试) 需求:只要执行 setState(), 就会调用 render 重新渲染.由于有时调用了 setState,但是并没有发生状态的改变,以致于不必要的刷新 解决: 重写 ...
- 5. 箭头函数_this 指向_es6 常用语法
1. 箭头函数 函数的简写方式 () => {} 只有一个参数时,可以省略() ---- x => {} 只有一条语句时,可以省略{},此时这点语句的结果会作为函数的返回值返回 () = ...
- 华大单片机开发板HC32L13X上手入门
HC32L136开发板(如下图所示)分为板载调试模块(左半部分)和MCU开发电路(右半部分).二者中间通过邮票孔相连,如果将板子从中间掰开,板载调试模块就可以当一个CMSIS-DAP的仿真器来使用.此 ...
- Easyui datagrid 数据表格 表格列头右键菜单选择展示列 JS
Easyui ,数据表格加载出来以后,在表格头右键,会有显示筛选的功能: 如图: 然后可以取消勾选,就变成下面这个样子: 功能的实现是通过重写了easyui 的 $.fn.datagrid.defau ...
- day25:接口类和抽象类
1,接口类和抽象类知识背景:一开始在程序界是没有这些概念的,后来就流行了一种语言叫做JAVA,JAVA是一种典型的纯面向对象的语言,JAVA写的程序都是非常适用于更庞大的项目,很多程序员就总结出了一些 ...
- kafka手动开启监听
项目集成spring-kafka,在项目启动后需要做些初始化资源的任务,kafka消费会依赖这些所以需要配置kafka手动启动. 类似这样,设置autoStartup为false 然后代码里面调用这个 ...
- 2017年年度总结 & 2018年计划
2017年年度总结 & 2018年计划 2017关键词 「入门」 从2017年4月,入坑软件测试行业,感谢这10个月,给予我开发.测试帮助的前辈们. 这10个月以来, 1,前后花了一个 ...
- hdfs常用的命令
查看hadoop的状态hdfs haadmin -getServiceState nn1切换主从 hdfs haadmin -failover nn1 nn2查看hdfs是否安全模式hdfs dfsa ...
- UIView的绘制原理
当UIView调用setNeedDisplay之后, 系统会调用view对应layer的 setNeedsDisplay, 在当前runloop即将结束的时候调用CALayer的display方法. ...