3 Vue项目工程化

什么是Vue项目工程化开发?

Vue HTML项目---中小型项目,比如单页、留言板、访客预约、简单的企业网站。

HTML开发的痛点:

在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

  • 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复 elementui el-button 模块化
  • 字符串模板 (String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 没有语法提示
  • 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏
  • 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript,而不能使用预处理器,如 Pug (formerly Jade) 和 Babel

单文件组件:

文件扩展名为 .vuesingle-file components (单文件组件) 为以上所有问题提供了解决方法,并且还可以使用 webpack 或 Browserify 等构建工具。

Vue项目工程化开发:

首先,Vue的思想:利用数据及组件来驱动。工程化就是为了让前端开发能够“自成体系”,从模块化组件化规范化三个方面体现:

1 模块化:代码划分为一系列职责单一,高度解耦且可替换的模块。===》可维护及扩展性强

2 组件化:页面或功能进行组件化分割并开发。===》单文件组件,多人开发,互不干扰。

3 规范化:项目开发规范化可操作性强。 ===》好的规范会直接影响到开发质量和效率。

  • 目录结构的制定
  • 编码规范 HTML JS CSS 附件 命名 前后端接口规范
  • 文档规范
  • 组件管理

Vue项目 工程化与html开发的区别

  • 由原来直接html页面开发,变成在vue的单文件组件以源码开发。
  • 引入组件、js库或者vue插件、CSS等资源,要以模块化的思想,来import和export。万物皆可模块化
  • 要预先定义组件和url的关系,即路由,来实现页面的跳转、重定向、前进或后退。
  • 增加了由源代码vue===>编译===》打包成html再发布的过程 webpack工具

相同点

  1. 都是在写html css js
  2. 最后 部署 都是 html结构

创建Vue项目

  1. 利用官网的VueCLI 脚手架工具 - 安装工具

    1. 安装nodejs 或将hbuilderX插件中的node和npm设置成环境变量 path

      查看命令 node -v 和 npm -v

    image-20220512142001229

    http://nodejs.cn/

    1. 新建vue-cli目录
    2. npm i vue-cli
    3. 查看vue 版本
    4. vue create 项目名 or vue ui 使用可视化工具
  2. 利用HbuilderX 新建Vue项目

    调整HbuilderX npm的仓库源 改成国内淘宝镜像

    cd E:\tools\HBuilderX\plugins\npm

    查看命令:npm config get registry

    调整命令:npm config set registry https://registry.npm.taobao.org

image-20220510134305476

Vue目录解析 (以HbuilderX构建为例)

 

image-20220510135320314

node_modules文件夹:用来存放用包管理工具下载安装的包的文件夹。ElementUI、Axios等工具都放到这里。

public文件夹: 公共资源 index.html 是将来打包后的入口文件。

src 源代码文件夹: 我们的开发工作主要在此进行。

bable.config.js: bable.js:该工具为了把高版本的ES6编译成低版本的,以保证浏览器兼容性。该文件是其配置文件。

package.json: 是Vue项目的整体配置文件,一般包括有项目启动、打包命令,声明依赖包等。npm install 构建项目时,必不可少的文件。

package-lock.json:是当 node_modules 或 package.json发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新

postcss.config.js:postcss:是一个利用JS插件来对CSS进行转换的工具

README.md 说明书

vue源代码目录

image-20220510142522640

 

assets文件夹:静态文件夹,存放静态资源,如img、css、fonts等。

components:组件文件夹,存放.vue的单页面公共组件。

App.vue: 项目的根(root)组件,项目的运行主入口。

main.js:项目的核心文件,首先执行的文件。

运行项目

运行Vue项目 == 执行 npm run serve 指令

  1. HbuilderX 运行->运行到浏览器/内部浏览器 自动执行 'npm run serve' 注:需在打开vue文件
  2. 选中项目,右键外部命令 'npm run serve'
  3. 打开windows的CMD或power shell控制台,CD到项目目录,运行npm run serve (需要在计算机中安装nodejs环境,否则npm无法执行,或者将HbuilderX插件中的npm目录加到系统的环境变量Path中)

package.json命令:

serve:利用vue-cli-service来启动服务

build:利用vue-cli-service来进行打包

停止项目

App.vue 单文件组件 源码分析

单文件应用:SPA single page applcation

单文件组件,是以.vue为后缀的文件。

由三个闭合标签构成:

template: html代码,即组件中的template属性,里面存放的时html标签。

script:js代码,定义组件的name,实例化Vue对象,并导出export default到项目中

style: css代码

单文件的含义,即用一个vue文件,来表示一个组件。

import export 语法 es6中 模块化

导出语法:

用大括号包围导出的变量名,多个以逗号分隔。

导入语法:

导入用大括号接收导出的成员名,多个以逗号分隔。 from:文件的路径,同级目录前加"./"

使用 import ** from ** 和 import ‘路径’ 还有 import {a, b} from ‘模块标识’ 导入其他模块

 

export default 1个

import 此处接收的变量名,可以自定义。

 

 

创建一个NavList的组件

  1. 创建template html结构
  2. export default 导出
  3. 在App.vue中导入
  4. 在App.vue的template中书写自定义组件标签名

打包项目

运行Vue项目 == 执行 npm run build指令

思考&&测试:如何创建组件之间的链接跳转?

下面用a链接的方式:

不可行的

Q:关于打包后的文件,无法直接打开的问题。

 

使用nginx部署项目

web服务器:

TOMCAT java html

APache PHP html java

IIS asp 和 asp.net

undowtow java

nodejs 它可以部署web服务器

nginx html php 部署前端,比较流行的一个web服务器

加入win全局变量:将nginx的目录路径添加到Path中。开启nginx服务需用start nginx。