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 项目的更多相关文章

  1. Vue2+Webpack创建vue项目

    相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...

  2. webpack 创建vue项目过程中遇到的问题和解决方法

    目录 1 webpack简介 2 webpack实现多个输入输出多个html 3  webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面 ...

  3. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  4. 离线webpack创建vue 项目

    参考地址: https://blog.csdn.net/feinifi/article/details/104578546 画重点: // 需要带上参数--offline表示离线初始化. --offl ...

  5. 使用vue-cli创建vue项目

    vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...

  6. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  7. 通过脚手架创建Vue项目

    第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...

  8. Linux下创建vue项目

    前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...

  9. VUE,基于vue-cli搭建创建vue项目

    前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...

随机推荐

  1. 小甲鱼Python第二十三讲课后习题--025,字典

    笔记: 1.字典是Python中唯一的映射类型 2.字典包含两个要素:键(key)和值(value)他们是成对出现的,用大括号括起来,多对存在时用逗号隔开. 3.可以用dict()直接创建字典,如di ...

  2. poj3045 Cow Acrobats(二分最大化最小值)

    https://vjudge.net/problem/POJ-3045 读题后提取到一点:例如对最底层的牛来说,它的崩溃风险=所有牛的重量-(底层牛的w+s),则w+s越大,越在底层. 注意范围lb= ...

  3. <iframe>和<frame>区别

    1.frame不能脱离frameSet单独使用,iframe可以 2.frame不能放在body中,否则不能正常显示 frame不能和body同时使用 <!--<body>--> ...

  4. JS的string操作

    1. charAt();如果想获取字符编码,则:charCodeAt(); var stringValue ="hello world"; alert(stringValue.ch ...

  5. 解析CommandMessage

    Json 解析: void CommandMessage::ParseCmdBody() { try { Json::Reader reader; Json::Value root; if (!rea ...

  6. 电子产品使用感受之——为什么我那么喜欢2015年的11.6寸MacBook Air?

    2018年Mac笔记本产品线得到了一次更新,Mac book Pro, MacBook Air更新后的Mac 产品线变得更加让人摸不着头脑,价格昂贵不说,产品分类细化到如此程度,让一个选择困难症的消费 ...

  7. :before和::before的区别

    单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素.伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示, ...

  8. Nginx(二)-服务模式运行nginx之WINSW

    虽然使用命令行控制ngix很简单,但是如果作为一个服务工作的话能更方便地启动.停止或者设置依赖项. 这里使用开源项目Windows Service Wrapper 来实现. github下载地址:ht ...

  9. python之str字符串

    字符串是python非常重要的数据类型,它是一个序列(列表和元组也是序列),有下标,可以通过下标遍历字符串序列:同时字符串也是一个不可变数据类型,每次使用"+"拼接字符串时都会产生 ...

  10. 透过实现小型打包工具理解webpack

    面试经常有问到 webpack,偶遇一篇比较有实用价值的且有利于理解的文章,现总结如下: 本篇文章中要实现的这个迷你打包工具,它主要能实现如下两个功能: ①.将 ES6 转换成 ES5: ②.支持在 ...