webpack4.x加vue模板文件简单还原vue-cli

1.首先 npm init -y 创建一个项目

2.安装vue

　　npm install vue --save

3.然后安装webpack 注意如果全局没有还要安装全局的webpack和webpack-cli

　　npm install --save-dev webpack webpack-dev-server webpack-cli

4.安装loader(加载器)

　　npm install --save-dev css-loader file-loader style-loader

5.安装vue模板的loader和template解析

　　npm install vue-loader vue-html-loader vue-style-loader vue-template-compiler

6.安装babel

　　npm install --save-dev babel-loader@7 babel-core babel-preset-env

　　推荐用babel-loader@7 7以上的版本依赖可能会报错

　　babel-preset-env：会根据配置的运行环境自动启用需要的babel插件

7.安装 html-webpack-plugin 不安装可能会出现配置完成后页面一片空白的情况

8.配置json的scripts

9.在根目录创建App.vue index.html index.js webpack.config.js 目录如下：

webpack.config.js配置如下

App.vue

index.html

index.js

然后npm run dev

npm run build 打包上线会生成一个dist文件夹就能直接上线啦

转载于:https://www.cnblogs.com/y-y-y-y/p/9759756.html

webpack4.x加vue模板文件简单还原vue-cli相关推荐

vscode生成vue模板快捷键_VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法...
1. 安装一个插件,识别vue文件 2.新建代码片段文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { " ...
Vue知识点整理（三）- Vue脚手架（1）- 初始化Vue脚手架、简单分析Vue脚手架结构
目录一.初始化Vue脚手架二.简单分析脚手架结构一.初始化Vue脚手架第一步(仅执行一次):全局安装 @vue/cli 在命令提示符内输入(命令提示符可由 win+R 调出运行界面,输 ...
php vue模板,探索 PHP 与 Vue 通用直出模板方案
测试方案,欢迎提出新的思路,共同探讨! 什么是"页面直出" 我们通常说的"页面直出",其实就是服务端渲染(SSR, Server-Side Render). 最 ...
php vue模板,探索PHP与Vue通用直出模板方案
测试方案,欢迎提出新的思路,共同探讨! 什么是"页面直出" 我们通常说的"页面直出",其实就是服务端渲染(SSR, Server-Side Render). 最 ...
QT加载office文件简单方法
记录下: QT 使用COM组件加载office的文件,使用需要安装MS office.WORD,EXCEL文件可以直接嵌入:PPT文件无法直接嵌入.能嵌入的同志望回复告知.下面描述了加载;*.doc ...
vue模板文件使用的方法
that.tplStr = that.readFile('/template/' + moduleName + '/' + formType + '.html') that.$refs.formBod ...
vue 模板_简化版的 vue 页面模板语法
简化的目的: 展现和逻辑分离.让页面模板文件仅仅和展现相关,从而方便做为 GUI Designer / 设计师工具的文件格式. 简化语法变种,方便 transpile 到不同的运行时平台,例如微信小程 ...
vue上传图片文件到服务器,vue如何将quill图片上传到服务器
通过自定义quill图片上传按钮,实现将图片上传服务器,并插入服务器地址. export default { name: "editor", props: ['content'], ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...

webpack4.x加vue模板文件简单还原vue-cli

webpack4.x加vue模板文件简单还原vue-cli相关推荐

最新文章

热门文章