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