如何使用vue组件搭建网页并打包发布

vue组件化项目搭建及编译打包发布

  • 引言
  • 开发环境
    • 开发环境介绍
    • 开发环境安装
  • 使用模板创建项目
  • 编译及打包发布

引言

最近开始学习Vue,Vue 是一个前端框架,特点是数据绑定和组件化。网上很多教程,数据绑定和组件学习起来也都不困难,但是当我学习到组件化的时候,开始有点懵逼了。

组件化指的是页面上的任何内容都可以保存为.vue的单独文件,里面包含了该组件的html结构,js脚本和css样式,像乐高积木一样通过互相引用而组装起来。概念其实并不难理解,网上也很多教程能够让我们搭建起一个简单的应用,甚至修改模板文件,最后使用npm run dev让我们的应用运行起来。

这就让我有点懵逼了,vue是前端js,学习的时候引入vue.js就可以,不应该依赖这样或那样的运行环境,总不能让我开发好了应用后再去服务器上安装一堆运行环境,然后再输入npm run dev让程序跑起来吧。

所以最后还是去认认真真的读了官方文档和新手入门,vue的组件化需要编译打包成js,这样就瞬间释然了。

开发环境

开发环境介绍

推荐的开发环境有Homebrew、Node.js、npm、webpack、vue-cli、Atom,当初安装网上教程搭建vue应用时也是一路安装过去,很多东西都不是很了解,其实也不用了解太多 -。- (我用的是Windows,目前只用到了下面这些开发环境。关于如何搭建开发环境和vue项目网上很多教程,这里就不详细说了,只做个简单记录)

Node.js :JavaScript的运行环境,这个是基础
npm :Nodejs下的包管理器,类似于Mac下的Homebrew,webpack和vue-cli都是通过npm来安装和更新的
webpack:Vue的组件都是以 .vue 形式存在的单文件,无法被客户端的浏览器解析,用于翻译和打包成 .js 文件
vue-cli :用来生成模板的vue工程

开发环境安装

  • 安装 Node.js
    首先从官网下载并安装Node.js,一路 next 就好。
    安装好之后在命令行工具中输入 node -v 查看Node.js的版本,如果提示错误则需要手动添加环境变量(自行百度)。
  • 安装 npm 包管理器
    npm是集成在Node.js中的,输入 npm - v 查看npm版本信息
  • 安装 cnpm
    由于npm有些资源被屏蔽的问题,所以需要安装国内镜像cnpm
    输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 等待安装
  • 安装 vue-cli 构建工具
    输入 npm install vue-cli -g 等待安装
  • 安装 webpack 编译打包工具
    输入 cnpm install webpack- g 等待安装,这里使用了国内镜像安装
  • 查看安装信息
    输入 npm list -g 查看全局安装包,
    npm list vue-cli -g 查看vue-cli安装包,如果显示 -- (empty) 则表示没有此包

使用模板创建项目

使用 cd 目录路径 转到存放项目的目录下,使用 vue init webpackvue init webpack-simple 创建工程

D:\wwwroot>vue init webpack-simple 工程名字<工程名字不能用中文>

或者创建 vue1.0 的项目
D:\wwwroot>vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

接下来会是一些初始化的设置,不清除什么意思的可以一路回车默认下去(我现在也只能搞懂一部分),官方有一些解释

Target directory exists. Continue? (Y/n)直接回车默认(然后会下载vue2.0模板,这里可能需要连代理)
Project name (vue-test)直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字

全部确认好之后会开始下载并生成模板工程,完成之后会出现提示信息,告诉你接下来该怎么做,这里分两种情况
我们在创建工程的时候提到过两种命令 vue init webpackvue init webpack-simple 前者是完全的,后者是简单的

  • vue init webpack
    提示信息如下,意思是转到vue目录,输入 npm run dev 运行程序
To get started:

  cd vue
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack
  • vue init webpack-simple
    提示信息如下,意思是转到vue-simple目录,输入 npm install 安装依赖源,输入 npm run dev 运行程序
   To get started:

     cd vue-simple
     npm install
     npm run dev

最后运行npm run dev,编译过程和结果两者也略有不同,大家可以自己去比较一下,不过最终实现的效果是一样的,如下图
如何使用vue组件搭建网页并打包发布_第1张图片
至此,大家就可以自己去测试和定制各种组件了,使用vue组件搭建网页应用

编译及打包发布

输入 npm run build 进行打包发布,编译完成后会在项目目录下生成 dist 文件夹,
根据创建项目命令不同( vue init webpackvue init webpack-simple ),编译后的文件组成形式也不一样

  • 使用 vue init webpack 创建的项目,dist文件夹中包含 index.html、 js 和 css文件
  • 使用 vue init webpack-simple 创建的项目,dist文件夹中只有 build.js,index.html 文件为项目目录下的index.html

你可能感兴趣的:(Vue)