您的位置: 首页  >  文章  >  如何使用vue组件搭建网页并打包发布

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

分类: 文章 • 2024-02-18 17:50:04

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 webpack 或 vue 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 webpack 和 vue 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组件搭建网页并打包发布
至此，大家就可以自己去测试和定制各种组件了，使用vue组件搭建网页应用

编译及打包发布

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

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

相关推荐