WebStorm下搭建webpack+vue开发环境

工具安装

首先安装一些必要的工具,由于npm的源都是在国外的地址,所以安装会比较慢,可以使用淘宝的国内镜像地址。 
1、安装淘宝镜像的命令为:

npm install -g cnpm --registry=https://registry.npm.taobao.org 

2、然后安装全局vue-cli脚手架,用于帮助搭建所需的Vue的开发模板框架。命令如下:

cnpm install -g vue-cli

安装完后输入命令“vue -V”,如果出现vue的客户端版本信息,则说明安装成功。 
3,安装 webpack,安装的命令为:

cnpm install webpack -g

安装完成之后,可以使用命令“ webpack -h”进行验证。至此,环境准备工作完成,后续即将开始环境验证工作。如果提示如下信息:

The CLI moved into a separate package: webpack-cli
Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)NO
It needs to be installed alongside webpack to use the CLI

可以使用下面的命令:

npm install --save-dev webpack-cli -g

4、打包工具webpack简介
webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript、CSS、图片等文件,webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的依赖关系,所以具有更强大的JS模块化的功能,它能对静态资源进行统一的管理以及打包发布。 它在很多地方都能替代Grunt和Gulp,因为它能够编译打包CSS,做CSS预处理,对JS的方言进行编译,打包图片,代码压缩等等。

Grunt和Gulp的工作方式:在一个配置文件中,指明对某些文件进行编译,组合,压缩等任务的具体步骤,运行之后自动逐步完成设定的任务。 
相比Grunt和Gulp,webpack具有如下的一些优势:

  1. 对 CommonJS 、AMD 、ES6的语法做了兼容;
  2. 对js、css、图片等资源文件都支持打包;
  3. 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持;
  4. 有独立的配置文件webpack.config.js;
  5. 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间;
  6. 支持 SourceUrls 和 SourceMaps,易于调试;
  7. 具有强大的Plugin接口,大多是内部插件,使用起来比较灵活;
  8. webpack 使用异步 IO 并具有多级缓存,使得 webpack 很快且在增量编译上更加快。


下面介绍使用webpack+vue新建一个移动项目: 


vue基本知识


1、vue init

使用命令vue init是初始化一个项目,例如:

vue init webpack cartoon_vue

基于webpack来构建一个名称为cartoon_vue的vue项目。

2、vue-cli

vue-cli是一个交互式命令行,通过vue命令构建项目会需要我们填写一些项目的信息,常见的信息有:

  1. Project Name:要创建的项目名称;
  2. Project Description:项目简介,也会出现在package.json文件中,可选;
  3. Author:作者,可选;
  4. Install vue-router:是否安装vue路由组件,做项目的话一定要安装;
  5. Use ESLint to lint your code:是否需要使用ESLint模块进行代码检测;
  6. Setup unit tests with Karma + Mocha?:是否安装测试(单元测试);
  7. Setup e2e tests with Nightwatch?:是否安装端到端的测试。

创建项目过程:


3、package.json

package.json主要是项目依赖的一些第三方的库:

  1. dependencies:项目中实际需要使用到的依赖包; 
  2. devDependencies:项目开发过程中需要使用的一些工具包,不是项目实际线上代码的一部分。

项目结构

  1. build目录:构建项目命令所需要使用到的一些脚本文件和配置文件;
  2. config目录:在vue-cli中会自动安装一个小型的express搭建的热重载web服务器,config里面就是关于这个服务器的相关配置;
  3. dist目录:项目编译构建上线后的存放目录;
  4. node_modules目录:项目依赖包存放目录;
  5. src目录:项目源代码存放目录;
  6. static目录:静态资源存放目录。
  7. 在项目开发过程中,我们的大部分任务是在src这个目录下完成的

运行项目:(在项目目录下运行一下命令)

npm run dev

项目目录结构图:

 

main.js:vue脚手架为我们自动生成的项目中设置的入口文件,在该入口文件中,做了一些项目初始化的工作:

  1. 引入 Vue;
  2. 引入必要的组件;
  3. 创建Vue实例。
  4. 路由

通过ajax异步无刷新获取数据 

vue为我们提供了一个第三方的框架来实现上述的功能:vue-router


使用vue-cli搭建移动app时,需要进行如下的一些设置:

使用vue-cli搭建项目框架;

  • 在index.html文件中添加<meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport">,在移动端设置禁止缩放,以便显示合适大小的页面;
  • 如果要将页面封装为app,那么需要将config/index.js中build的assetsPublicPath设置为’./’,build获得的页面可以直接打开,而不需要使用服务器。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值