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
vue项目的三种开发模式-编程之家

2.手动模块化开发

开发流程：
vue项目的三种开发模式-编程之家

详细讲解：

包含四个文件：vue_02.html 、vue.min.js、model01.js、main.js
vue项目的三种开发模式-编程之家

model模块化开发：
vue项目的三种开发模式-编程之家

main入口文件：
vue项目的三种开发模式-编程之家

进入项目中：输入命令

webpack main.js build.js

vue项目的三种开发模式-编程之家

使用这个统一的build.js文件，引入项目完成。
vue项目的三种开发模式-编程之家

3.自动模块化开发

1、开发流程

vue项目的三种开发模式-编程之家

包含6个文件vue_02.html 、vue.min.js、model01.js、main.js、package.json、webpack.config.js
vue项目的三种开发模式-编程之家

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"},

vue项目的三种开发模式-编程之家

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、执行程序

vue项目的三种开发模式-编程之家

此时完成，其本质就是通过进入项目目录输入命令实现

npm  run dev

vue项目的三种开发模式-编程之家

5、调试程序

使用了webpack之后就不能采用传统js的调试方法在chrome中打断点。webpack提供devtool进行调试，devtool是基于sourcemap的方式，在调试时会生成一个map文件，其内容记录生成文件和源文件的内容映射，即生成文件中的哪个位置对应源文件中的哪个位置，有了sourcemap就可以在调试时看到源代码。

配置如下：
1、在webpack.config.js中配置：

 devtool: 'eval‐source‐map',

vue项目的三种开发模式-编程之家

2.在model.js中打断点
vue项目的三种开发模式-编程之家