【Vue】Vue-cli程序 webpack使用 vue-router路由

最新推荐文章于 2024-06-10 15:05:54 发布
最新推荐文章于 2024-06-10 15:05:54 发布
阅读量250 收藏
点赞数
分类专栏： Vue 文章标签： vue npm vue-cli3 webpack vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43466788/article/details/110733491
版权

文章目录

配置环境

Node.js安装

  1. 下载网站：http://nodejs.cn/download/
  2. 安装流程：一路Next即可
  3. 安装完后，进入cmd检测是否安装成功
    在这里插入图片描述
  4. 这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多。

安装cnpm

安装Node.js 淘宝镜像加速器(cnpm)：这样子的话,下载会快很多

# -g 全局安装
npm install cnpm -g

在这里插入图片描述
如果你有出现上面安装失败的情况，可以试一下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述

安装vue-cli

  1. 安装命令：
cnpm install vue-cli -g

在这里插入图片描述

  1. vue list命令查看检测是否安装成功，并查看可以基于哪些模板创建vue应用程序，通常使用webpack
    在这里插入图片描述

git安装

下载网站：https://git-scm.com/downloads/

创建vue-cli

  1. 在指定目录下创建
    命令：
#myvue为自己命名
vue init webpack myvue

在这里插入图片描述

选项可以根据自己需求：

  • Project name： 项目名称，默认回车即可
  • project description：项目描述，默认回车即可.Author:项目作者，默认回车即可
  • Install vue-router：是否安装 vue-router，选择n不安装（后期需要再手动添加）
  • Use ESLint to lint your code：是否使用ESLint做代码检查，选择n 不安装（后期需要再手动添加)
  • Set up unit tests：单元测试相关，选择n不安装（后期需要再手动添加)
  • Setup e2e tests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加)
  • Should we run - - npm install for you after the project has been created：创建完成后直接初始化，选择n，我们手动执行;运行结果!

在这里插入图片描述

  1. 执行目录下的vue-cli程序
    在这里插入图片描述

  2. 还需要安装依赖环境
    在cmd下进入该项目文件目录，然后npm install,会多一个node_modules文件夹
    在这里插入图片描述

在这里插入图片描述
（图源：https://blog.csdn.net/neuf_soleil）

  1. 运行测试
    npm run dev

在这里插入图片描述
在这里插入图片描述

  1. 怎样停止运行：
    Ctrl+C
    在这里插入图片描述

  2. 用IDEA打开我们的vue-cli程序
    在这里插入图片描述

  3. 里面有很多ES6的语法：
    export default：将这个组件整体导出，之后就可以使用import导入组件。

webpack安装

本质上,webpack 是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.

  1. 安装命令
cnpm install webpack -g
cnpm install webpack-cli -g
  1. 使用

模块化开发：
需要导出的JS文件：定义一些方法。需要导入的JS文件，声明引用，再调用方法。最后用webpack打包。然后就可以再html页面中应用了。

test.js:

//暴露一个方法exports
exports.sayHi = function () {
    document.write("<h1>Hello</h1>")
};

main.js

var t = require("./test");
t.sayHi();

1）创建一个webpack.config.js

在这里插入图片描述
2)编写webpack.config.js

module.exports = {
  entry: "./modules/main.js",  //需要打包的js文件
  output: {
      filename: "./js/bundle.js" //生成js文件的路径
  }  
};
  • entry: 入口文件，指定WebPack 用哪个文件作为项目的入口.
  • output:输出，指定WebPack 把处理完成的文件放置到指定路径.
  • module:模块，用于处理各种类型的文件
  • plugins:插件，如:热更新、代码重用等.
  • resolve:设置路径指向
  • watch:监听，用于设置文件改动后直接打包
    模板：
module.exports = {
    entry: "",
    output: {
         path: "" ,
         filename: ""
    },
    module: {
       loaders : [
           {test: /\.js$/ ，loader: ""}
       ]
     },
    plugins: {},
    resolve: {},
    watch :true
}

3）再IDEA的终端输入webpack命令
在这里插入图片描述
出现上面情况的解决办法：找到IDEA快捷方式，单机进入属性：勾选下图，运用即可
在这里插入图片描述
重启IDEA，重新运行命令webpack
在这里插入图片描述
在目录中生成了bundle.js
在这里插入图片描述
4)测试生成的bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/js/bundle.js"></script>
</head>
<body>

</body>
</html>

在这里插入图片描述

vue-router路由

官网：https://router.vuejs.org/

  1. Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变
    得易如反掌。包含的功能有:
  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于Vue.js过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的CSS class的链接
  • HTML5历史模式或hash模式，在IE9中自动降级
  • 自定义的滚动条行为

  1. 如果在前面的创建vue-cli程序中没有安装vue-router，进行下面流程安装：
    1）以管理员模式打开IDEA我们创建的vue-cli程序
    2）在IDEA终端，输入命令：npm install vue-router --save-dev不成功用cnpm
    在这里插入图片描述

  2. 配置路由文件，在vue-cli程序中src目录下创建一个router文件夹放router相关文件
    index.js

import Vue from 'vue'
//安装vue-router后导入进来
import VueRouter from 'vue-router'

//导入组件
import Content from '../components/Content'
import Main from '../components/Main'

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/content',
      name: 'content',
      //跳转的组件
      component: Content
    },
    {
      //路由路径
      path: '/main',
      name: 'main',
      //跳转的组件
      component: Main
    }
  ]
});
  1. 把我们写的路由放到main.js中：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

//导入路由
import router from './router'

//阻止vue在启动时生成生产提示
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})
  1. 再编写我们的父组件App.vue
  • <router-link>路由标签，里面的属性to表示要跳转的路由路径，在路由配置中定义了两个路径：/main和/content
  • <router-view>显示路由的组件
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <!--展示路由-->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</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>
  1. 在终端输入命令：npm run dev运行程序，效果如下：

在这里插入图片描述

高 朗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue系列 —— vue-route详细使用方法
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
vue-router 路由超详细教程
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
weblogic中servlet报404_weblogic中ServletActionContext.getServletContext().getRealPath("/")空指针的解决...
weixin_39652136的博客
12-21 646
问题：在weblogic war 路径 getServletContext().getRealPath()和request.getRealPath，weblogic获取路径总是为NULL，怎么破？？？？？通常情况下载tomcat中，我们以前使用 HttpServletRequest request;request.getRealPath(arg0)但是这是个方法已经过时了。。。。。。。。reque...
vue-cli是什么？和 webpack是什么关系？
最新发布
炑焽的博客
06-10 1088
Vue CLI是Vue.js项目的官方脚手架，基于Node.js与Webpack构建。安装Vue CLI前需确保Node.js已安装，随后通过npm全局安装。Vue CLI能迅速创建和管理Vue.js项目，提升开发效率。而Webpack则负责资源打包，通过配置文件管理依赖、插件等，优化代码并分割资源，提高项目性能。Vue CLI与Webpack的完美结合，让开发者更专注于业务逻辑，轻松构建高效、稳定的Vue.js应用。
Vue-Router详解
凉茶铺的博客
01-24 8045
介绍了Vue-Router的相关知识点
Vue路由（vue-router）详细讲解指南
精选资讯文章
06-05 6587
酷的同时也会给我们带来一些问题，因为使用路由参数时，从/user/xianyu导航到/user/mengxiang，原来的组件实例会被复用，两个路由都渲染同个组件，比起销毁再创建，显示复用显得效率更高，带来的的只管问题就是生命周期钩子函数不会再被调用，也就是不会再被触发；就这样，我们的页面就可以进行路由跳转和切换了，路由的基本使用就完成了；重定向实际上是当匹配到路径符合条件的时候去执行对应的路由，当然这个时候的url上面的地址显示的是对应的路由，页面也是对应的路由页面；
vue-admin-template:后台管理系统 vue+vue-cli+webpack+boostrap
05-14
"vue-admin-template" 是基于Vue.js、Vue CLI、Webpack和Bootstrap构建的一个后台管理系统模板。这个模板提供了一个起点，开发者可以在此基础上快速搭建功能完备的管理后台。 **Vue.js** Vue.js的核心特性包括声明...
详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
12-12
windows下vue-cli及webpack 构建网站(三)使用组件  1、本篇文章是建立在以上三篇文章的基础上的。 2、安装 vue-router 插件，运行cmd进入到项目目录下面，运行以下命令： cnpm install vue-router --save-dev ...
Vue-cli-webpack搭建斗鱼直播步骤详解
08-28
本篇文章主要介绍了使用 Vue-cli-webpack 搭建斗鱼直播的步骤详解，包括项目初始化、安装依赖、引入安装的包、配置映射和测试斗鱼 API 等多个方面。 一、项目初始化 在开始构建项目之前，需要首先初始化项目文件夹...
vue-router 详解
OneBaBa的专栏
05-24 2066
to：用于指定跳转的路径tag：tag可以指定之后渲染成什么组件，比如我们下面的代码会被渲染成一个元素，而不是。replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
vue-router
青蛙king的博客
08-08 1万+
一、如何引入并使用Vue Router 使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？ 第一步，将组件 (components) 映射到路由。 第二步，告诉 Vue Router 在哪里渲染它们。 二、动态路由匹配 三、嵌套路由 四、编程式的导航 五、命名路由 六、命名视图 七、重定向和别名 八、路由组件传参 九、HTML5 History 模式 ...
vue-router路由（概念、作用、安装、示例）
m0_45899013的博客
06-11 3万+
一、 vue-router概念： 这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（single page application单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应
Vue基础知识总结 11：前端路由vue-router
热门推荐
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
【Vue-CLI】Vue-CLI+webpack构建Vue项目
我的博客
11-09 4219
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过@vue/cli实现的交互式的项目脚手架。通过@vue/cli+实现的零配置原型开发。一个运行时依赖 ()，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。一套完全图形化的创建和管理 Vue.js 项目的用户界面。Vue CLI 致力于将 Vue 生态中的工具基础标准化。
Vue进阶——Vue Router（路由）
秋书一叶的博客
04-26 5466
Vue Router 是 Vue.js 官方提供的路由管理器。它和 Vue.js 核心深度集成，可以方便地在 Vue.js 应用中使用路由功能，支持基于 HTML5 History API 的单页应用 (SPA) 以及传统的多页应用程序 (MPA)。使用 Vue Router 可以实现在单页应用中切换页面而不刷新页面，同时还支持路由参数、路由组件、嵌套路由等高级功能，方便开发者构建复杂的前端应用。
Vue的router详解
Litt_White的博客
08-20 4496
vue-router参数配置，vue-router的相对路径和绝对路径，带/和不带/的区别，vue-router路由的嵌套使用，vue-router的路由传参，keep-alive的使用，vue-router动态添加路由，删除路由，vue-router导航守卫的使用
Vue — 路由router
敏敏的博
06-13 574
路由是Vue的一个插件，专门用来实现SPA应用。什么是SPA？一个路由就是一组映射关系（key - value），了解Vue路由，看这一篇就够了！！！
使用vue-cli快速创建Webpack项目的步骤详解
- **Webpack**: 用于模块打包，Vue CLI使用Webpack模板意味着项目依赖管理、资源处理（如CSS、图片、字体）等都将由Webpack处理。 - **Babel**: 用于JavaScript代码的转换，确保老版本浏览器也能支持最新的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值