vue项目的三种开发方式
文章目录
- vue项目的三种开发方式
- 1.原始无合作开发
- 2.手动模块化开发
- 3.自动模块化开发
- 1、开发流程
- 2、配置webpack-dev-server
- 1.下载安装包
- 2.配置package.json
- 3、配置webpack.config.js
- 4、执行程序
- 5、调试程序
1.原始无合作开发
包含两个文件：vue_01.html ,vue.min.js
2.手动模块化开发
开发流程：
详细讲解：
包含四个文件：vue_02.html 、vue.min.js、model01.js、main.js
model模块化开发：
main入口文件：
进入项目中：输入命令
webpack main.js build.js
使用这个统一的build.js文件，引入项目完成。
3.自动模块化开发
1、开发流程
包含6个文件vue_02.html 、vue.min.js、model01.js、main.js、package.json、webpack.config.js
2、配置webpack-dev-server
1.下载安装包
安装webpack-dev-server采用本地安装，进入项目中
使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev
2.配置package.json
在package.json中，添加script
-inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址
"scripts": {"dev": "webpack-dev-server --inline --hot --open --port 5008"},
devDependencies：开发人员在开发过程中所需要的依赖。
scripts：可执行的命令
3、配置webpack.config.js
webpack.config.js是webpack的配置文件
1、配置模板文件,跟之前的vue_02项目相同
作用：为下一步提供模板
2、配置 html-webpack-plugin
在webpack.config.js中配置html-webpack-plugin插件
作用：是根据html模板在内存生成html文件
var htmlwp = require('html‐webpack‐plugin');
module.exports={entry:'./src/main.js', //指定打包的入口文件output:{path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径filename:'build.js' //输出文件},plugins:[new htmlwp({title: '首页', //生成的页面标题<head><title>首页</title></head>filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能template: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)})]
}
4、执行程序
此时完成，其本质就是通过进入项目目录输入命令实现
npm run dev
5、调试程序
使用了webpack之后就不能采用传统js的调试方法在chrome中打断点。webpack提供devtool进行调试，devtool是基于sourcemap的方式，在调试时会生成一个map文件，其内容记录生成文件和源文件的内容映射，即生成文件中的哪个位置对应源文件中的哪个位置，有了sourcemap就可以在调试时看到源代码。
配置如下：
1、在webpack.config.js中配置：
devtool: 'eval‐source‐map',
2.在model.js中打断点
