用 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 ...
随机推荐
- python学习:注释、获取用户输入、字符串拼接、运算符、表达式
注释 #为单行注释'''三个单引号(或者"""三个双引号)为多行注释,例如'''被注释的内容''' '''三个单引号还可以起到多行打印的功能. #ctrl+? 选中的多行 ...
- angularjs 初始化方法执行两次以及url定义错误导致传值错误问题
1.初始化方法执行两次以上的问题定义一个 route.如下所示:.state('main.channelQryDetail', { url:'/channelDetail/:channelNo/:pa ...
- js估算一篇文章的阅读时长
每天早上上班在地铁里我都有看技术类文章以及实时新闻的习惯,偶尔会看到有些文章的开始部分会提醒我们这篇文章大概的阅读时长,我就在想这是怎么实现的,具体到前端开发中,又是如何实现的.今天在浏览Segmen ...
- [LeetCode] Design HashMap 设计HashMap
Design a HashMap without using any built-in hash table libraries. To be specific, your design should ...
- Linux中使用Apache发布html网页
在线学习: https://www.shiyanlou.com/courses/1 工具/原料 Linux,httpd,vi 样例html文件一份 方法/步骤 1 编辑httpd配置文件 2 查找 ...
- leetcode 单链表相关题目汇总
leetcode-19-Remove Nth From End of List—移除链表中倒数第n个元素 leetcode-21-Merge Two Sorted Lists—两个已排序链表归并 ...
- matplotlib 三维旋转
# 当elevation=0时,视角为沿x1负方向看,当elevation=90时,视角沿x3负方向看.# 当azimuth=0时,视角为沿x1负方向看,当azimuth=90时,视角沿x2负方向看. ...
- Codeforces 785D - Anton and School - 2 - [范德蒙德恒等式][快速幂+逆元]
题目链接:https://codeforces.com/problemset/problem/785/D 题解: 首先很好想的,如果我们预处理出每个 "(" 的左边还有 $x$ 个 ...
- 20175303 2018-2019-2 《Java程序设计》第8周学习总结
20175303 2018-2019-2 <Java程序设计>第8周学习总结 教材学习内容总结 本周学习<Java程序设计>第十五章: 泛型: 泛型(Generics)的主要目 ...
- 关于ico图标
ico图标可以作为网页标签上显示的小logo,比如: 要获取一个网站的ico图标,只需要在url后输入/favicon.ico即可,比如 https://www.baidu.com/favicon ...