前端网页--Vue进阶

最新推荐文章于 2024-09-17 19:45:31 发布

峰＃

最新推荐文章于 2024-09-17 19:45:31 发布

阅读量209

点赞数 1

文章标签： vue vue-cli3

本文链接：https://blog.csdn.net/m0_46444588/article/details/121429518

版权

构建Vue项目 lifecycle+npm+webpack

Vue的生命周期 lifecycle

我们在每个特定阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了名字叫做生命周期钩子函数/组件钩子。

生命周期函数：

vue实例在某一个时间点会自动执行这些函数；
生命周期钩子函数不允许写成箭头函数；

可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/销毁后）

细分每个过程：

npm 概念

npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

npm 为你和你的团队打开了连接整个 JavaScript 世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个包（package）（即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

官网：

https://docs.npmjs.com/about-npm 英文官网

https://www.npmjs.cn/ 中文官网

webpack 概念

Webpack是前端自动化构建工具，它基于nodejs实现，可以帮助我们实现资源的合并、打包、压缩、混淆的诸多功能。可以快速构建一个Vue项目，包括各类文件（assets资源、scripts脚本、images图片、styles样式）。

官网：

https://webpack.js.org/

vue-cli脚手架

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli就是Vue的脚手架工具，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。

安装步骤：

-1.安装原因：

为了能够成功的使用vue项目，必须先安装vue-cli脚手架

-2安装nodejs并验证

安装nodejs,下一步下一步就可以,可以安装最新的15版本,win7的话可以安装14版本.使用以下dos命令提示符下执行，验证nodejs是否安装：

node -v # v8.11.3，至少8以上,最新的是v15.11.0

-3.配置npm

Nodejs下的包管理器,Nodejs中包含了npm,无需单独安装.默认去官网下载资源,可以换成国内的镜像

npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像

npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/

-4.参数说明

注意单词的大小写

-i 安装指令，全拼： install
-S 生产环境，全拼： --save
-D 开发环境，全拼： --save—dev
-O 可选依赖，全拼： --save—optional
-E 精确安装指定模块版本，全称：--save—exact
-g 全局安装，全拼： --global

-5.脚手架安装

vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置（需要几分钟）

npm install vue-cli -g #安装vue-cli脚手架---可能比较慢,要等几分钟

npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必

vue –V #查看版本

where vue #vue安装在哪里

创建Vue项目 npm

工作空间

进入工作空间目录：D:\workspace\vue

生成vue项目

基于vue.js的官方webpack模板：(乱码无需理会)
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包

vue init webpack jt01 #此处项目名不能使用大写---可能比较慢,要等

注：

jt01 为自定义的项目名称
产生项目webpack模板，目录100+m，可见内容多复杂，庞大
会自动生成node_modules临时目录，可以删除，每次编译、运行会自动产生

启动项目 & 停止项目

cd jt01 # 进入项目目录

npm run dev # 自动启动服务，ctrl+c 停止,可能要等几分钟

测试访问

注意：端口号可能不同，默认为8080，如果发现端口占用npm很聪明，它会自动改变端口号，以其具体提示的端口信息为准。

HBuilderX管理Vue项目

打开Vue项目

HBuilderX是最新前端开发利器之一，全面支持Vue的开发，具有丰富的提示，使用它打开：D:\workspace\vue\jt01目录（可自行定义自己的目录）

项目结构

目录结构

这个目录结构非常重要，大家要熟记。规定好每个目录的作用，方式和位置就约定统一了。有了这套规则，文件就不会乱放，这样找资源时就知道到哪里找，写代码文件时就按功能放到指定的目录中。这种方式已经非常常见，如Maven构建项目目录有强制的约定，如Spring框架中约定大于配置。

view 就是用户要访问的页面都存放在这个目录下，如Index.vue
static中保存一些静态的资源，如jquery、css、图片等
src 目录是一个很大的目录，包罗万象
components 把项目中所需要的组件都放在此目录下，默认会创建一个HelloWorld.vue，我们可以自己添加，如添加Header.vue
router 访问的路径，Vue提倡的是SPA（Single Page WebApplication）单页面设计，这是以前旧页面中如果包含其他资源，必然涉及到路径问题。Html没有很好的解决这个问题，而router它是一种解决路径的新发明，很好的解决了多模块页面刷新问题。简而言之就是给组件指明一个路径，我们怎么去访问它。不同组件是依靠配置的路径router来访问的。Router非常强大，老系统是url改变是在服务端进行刷新，而router支持在客户端刷新，就是url变化，页面内容变化，但不请求服务器端，以前的程序是做不到的。此处不好理解，后期专门章节论述，不必心急，先记录下这个特点

重要文件说明

Vue项目这么多文件，它们什么关系？写代码该从哪里下手呢？
常见操作: 1, 在components里写自定义组件 2, 在App.vue里注册自定义组件 3, 在main.js里引入第三方js

 index.html 首页，Vue是SPA单页面开发，页面入口，定义了一个div,并设置id=app
 src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中

 src/App.vue 根组件,可以添加自定义组件

 src/router/index.js 引入子组件HellWorld.vue

调用关系图

简单来说项目加载的过程是：

index.html->main.js->App.vue->index.js->HelloWorld.vue

Vue项目中自定义组件

概述

组件（Component）是 Vue.js 最强大的功能之一，好处是可以提高前端代码的复用性。

项目结构

创建组件Person.vue文件

<template>
  <div>{{msg}}</div>
</template>

<script>
  //表明，这个组件可以导出
export default{
  name:'Person',
  data(){
    return{
      msg:'hello vue project~' 
    }
  }
}
</script>

<style>
</style>

修改App.vue,注册自定义组件

<template>
  <div id="app">
    <!-- 3.使用自定义的组件 -->
    <Person></Person>
</div>
</template>

<script>
  //1.导入指定的自定义组件,路径要求必须有./
  import Person from './components/Person.vue'

export default {
  name: 'App',
  components:{//2.添加组件
    Person//使用第一步导入成功的组件名
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

测试

保存后，点击这个三角符号运行或者到指定文件下dos命令写npm run dev

运行结果为：

Vue项目中自定义路由

项目结构

自定义组件

<template>
  <h1>我是t1</h1>
</template>

<script>
</script>

<style>
</style>

<template>
  <h1>我是t2</h1>
</template>

<script>
</script>

<style>
</style>

自定义路由规则

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

/* 1.引入自定义的组件位置 */
import t1 from '@/components/t1'
import t2 from '@/components/t2'

Vue.use(Router)

export default new Router({
  routes: [
    /* 2.定义路由的细则，什么请求路由到哪个组件 */
    {path:'/',component:HelloWorld},
    {path:'/t1',component:t1},
    {path:'/t2',component:t2}

  ]
})

修改App.vue

<template>
  <div id="app">
    <!-- 使用路由规则-->
    <router-link to="/t1">t1</router-link>
    <router-link to="/t2">t2</router-link>
    <router-view></router-view>
  </div>
</template>