Vue项目工程化+路由

「已注销」

已于 2022-05-13 13:47:52 修改

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

于 2022-05-13 13:36:31 首次发布

本文链接：https://blog.csdn.net/tydl206/article/details/124750152

版权

本文介绍了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

单文件组件：

文件扩展名为 .vue 的 single-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工具

相同点

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

创建Vue项目

利用官网的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 使用可视化工具
利用HbuilderX 新建Vue项目

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

cd E:\tools\HBuilderX\plugins\npm

查看命令：npm config get registry

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

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源代码目录

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

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

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

main.js：项目的核心文件，首先执行的文件。

运行项目

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

HbuilderX 运行->运行到浏览器/内部浏览器自动执行 ‘npm run serve’ 注：需在打开vue文件

选中项目，右键外部命令 ‘npm run serve’

打开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