Vue项目工程化+路由

本文介绍了Vue项目工程化开发,对比了与HTML开发的区别,强调了模块化、组件化和规范化的重要性。详细讲解了如何创建Vue项目,包括Vue CLI的使用、单文件组件、路由管理和打包过程。同时,探讨了vue-router的安装、命名路由、声明式与编程式导航的应用,提供了实际的路由配置和组件间跳转的实践案例。
摘要由CSDN通过智能技术生成

20220513录屏

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kc62sgna-1652420150626)(Vue.js培训笔记/image-20220512142001229.png)]

    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构建为例)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GRx6tpqX-1652420150627)(Vue.js培训笔记/image-20220510135320314.png)]

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命令:

"scripts": {
    
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build"
},

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

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

停止项目

crtl+c Y 或 crtl+c 两次

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

单文件应用:SPA single page applcation

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值