一、 使用Webpack+Babel打包Vue项目
步骤:
1、 安装babel相关的包
图片1.png
npm install babel-core babel-loader babel-preset-env –save-dev
2、 在项目根目录下创建一个babel的配置文件.babelrc
图片2.png
3、 在.babelrc中配置写好对应的json代码片段
图片3.png
代码片段
1.png
4、 在webpack.config.js中使用babel-loader
图片4.png
5、 在webpack.config.js的插件配置中写上如下代码即可
图片5.png
6、在当前项目中的根目录下，运行
webpack --progress打包即可
图片6.png
二、 使用Express开启Web服务，通过网络访问Vue项目
步骤:
1、将index.html、bundle.js放在对应的文件夹下面
图片7.png
2、在server.js写好对应的代码
图片8.png
3、在终端中使用
node server开启web服务
图片9.png
4、在浏览器中输入
127.0.0.1:3000/index.html，即可看到效果
图片10.png
网友评论