vue项目的三种开发模式

vue项目的三种开发方式

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 [email protected] [email protected] [email protected] --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: '首页',  //生成的页面标题
            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中打断点