vue项目的三种开发方式

文章目录

vue项目的三种开发方式
- 1.原始无合作开发
- 2.手动模块化开发
- 3.自动模块化开发
- - 1、开发流程
  - 2、配置webpack-dev-server
  - - 1.下载安装包
    - 2.配置package.json
    - 3、配置webpack.conﬁg.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.conﬁg.js

webpack.conﬁg.js是webpack的配置文件

1、配置模板文件,跟之前的vue_02项目相同

作用：为下一步提供模板

2、配置 html-webpack-plugin
在webpack.conﬁg.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.conﬁg.js中配置：

 devtool: 'eval‐source‐map',

2.在model.js中打断点

vue项目的三种开发模式相关推荐

Entity Framework技术系列之2：三种开发模式实现数据访问
前言 Entity Framework支持Database First.Model First和Code Only三种开发模式,各模式的开发流程大相径庭,开发体验完全不一样.三种开发模式各有优缺点,对 ...
ASP.NET的三种开发模式
前言 ASP.NET 是一个免费的Web开发框架,是由微软在.NET Framework框架中所提供的,或者说ASP.NET是开发Web应用程序的类库,封装在System.Web.dll 文件中.AS ...
原生 APP、Web、混合 APP，三种开发模式有何不同？
前言原生 App 又称Native App,该开发针对 IOS.Android.Windows 等不同的手机操作系统要采用不同的语言和框架进行开发:无论是从开发难度,价格还是周期来看,原生开发都更复 ...
.NET EF框架的安装、及三种开发模式
一.EF框架的安装: 要在VS(如Visual Studio 2012)中使用EF框架,就需要先进行安装. 我们需要给这个应用安装EntityFramework包,引入EF框架相关的内容,我们需要引入 ...
详解跨平台APP的三种开发模式
目前市面上主流的APP开发模式有三种:一种是Andriod和IOS的原生APP开发:一种是WebApp HTML5开发,最后一种是Hybrid App混合式开发. 1.Navtive APP开发(原生 ...
python编程模式是什么_python 开发的三种运行模式详细介绍
Python 三种运行模式 Python作为一门脚本语言,使用的范围很广.有的同学用来算法开发,有的用来验证逻辑,还有的作为胶水语言,用它来粘合整个系统的流程.不管怎么说,怎么使用python既取决于 ...
IOS开发之自定义Button(集成三种回调模式)
前面在做东西的时候都用到了storyboard,在今天的代码中就纯手写代码自己用封装个Button.这个Button继承于UIView类,在封装的时候用上啦OC中的三种回调模式:目标动作回调,委托回调 ...
五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看）
五分钟教你使用vue-cli3创建项目(三种创建方式,小白入门必看) 一.搭建vue环境安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support) ...
app四种开发模式区别，网页链接转app优缺点
网页链接转app优缺点优点:开发和发布都比较方便,开发成本也低,可以做到app一年及以上不更新,页面随时可以更新. 缺点:需要手机网站反应速度要快,用好的服务器,否则打开会慢 ios免签封装: 免签 ...

vue项目的三种开发模式