Vue项目的使用 2023版最新出炉Vue教程

最新推荐文章于 2024-09-01 14:44:15 发布

被子不喝酒

最新推荐文章于 2024-09-01 14:44:15 发布

阅读量594

点赞数

分类专栏：文章 Mysql 文章标签： arcgis maven spring boot

本文链接：https://blog.csdn.net/qq_59066017/article/details/131556812

版权

文章同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Mysql

3 篇文章 0 订阅

订阅专栏

vue项目的使用

一.安装nodejs

node.js直接下载 nodejs.p2hp.com

安装完之后检测是否安装成功

node -v   检测是否安装node
npm -v    检测是否安装npm

下载淘宝加速器

npm install cnpm -g   -g就是全局安装

安装vue-cli

cnpm install vue-cli -g
测试是否安装成功
查看可以基于哪些模块创建cue应用
vue list

一定要用管理员打开

二.创建一个vue项目

在我们所要创建的路径中cmd进入

创建一个基于webpack模块的vue应用程序

这里myvue 这是项目的名称,可以根据自己的需求起名
vue init webpack myvue

说明

Project name: 项目名称默认回车即可

Project descriptio: 项目描述, 默认回车即可

Author: 项目作者,默认回车即可(可自行创建作者)

Vue build 选择第一个即可

install vue-router': 是否安装vue-router选择 n 不安装(懂的朋友可选择安装,不懂的朋友,后面我会说明)

Use ESLint to Lint your code : 是否使用ESLint做代码检查,选择N 不安装(后期需要自己手动添加)

Set up unit tests: 单元测试相关,选择n不安装(后期需要自己手动添加)

Set e2e tests with Nightwatch: 单元测试相关,选择n不安装(后期需要自己手动添加)

Should we run npm install for you after the project has been created : 创建完成后直接初始化选择N 我们手动执行运行结果

初始化并运行

进入到我们的vue项目
cd myvue 
下载安装依赖   注意: 一定要以管理员模式运行
npm install

在命令符中启动

npm run dev

成功启动后就是这样

将弹出来的8080复制到网址中就是这样我们的vue项目就完成了

三.安装webpack

npm install webpack -g
npm install webpack-cli -g

测试安装成功

webpack -v
webpack-cli -v

配置

创建webpack.config.js配置文件

entry: 入口文件,指定WebPack用那个文件作为项目的入口

output: 输出,指定WebPack把处理完成的文件防止到指定路径

module:模块,用于处理各种类型的文件

plugins:插件,如:热更新.代码重用

resolve:设置路径指向

watch: 监听,用于设置文件改动后直接打包

四.使用webpack

webpack是静态模块打包工具,分析翻译,压缩,打包代码

支持所有类型文件的打包

支持less/sass=>css

支持ES6/7/8=>ES5

压缩代码,提高加载速度

在主目录下创建一个名为modules的目录,用于防止JS模块等资源文件

在modiles下创建hello.js模块文件即可

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

在modules下再创建一个名为main.js的入口文件,用于打包时设置entry属性

//require 导入一个模块,就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

在项目目录下创建webpack.config.js配置文件使用webpack命令打包

// 将模块导出
  module.exports = {   
       // 入口文件,指定WebPack用那个文件作为项目的入口
        entry:'./modules/main.js',  
    // 输出,指定WebPack把处理完成的文件防止到指定路径  
      output: { 
          // 打包后指定js文件的路径和包名      
          filename:"./js/bundle.js" 
      }};

注意: 使用webpack打包时,有可能会发生错误,这时请使用npx webpack打包

解决方法如下：

输入：get-ExecutionPolicy 获取执行策略

如果显示：Restricted，表示是受限制的

输入：set-ExecutionPolicy Remotesigned，设置执行策略远程签约

继续输入：get-ExecutionPolicy，查询执行策略

显示：Remotesigned，表示已经远程签约了，可以正常使用webpack命令打包了

打包成功后会出现一个文件夹

6.在目录上创建一个html ,导入我们打包后的js

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>



<script src="dist/js/bundle.js"> </script>

</body>

</html>

点击以下任意浏览器就可完成页面

这时我们的webpack项目就完成了

五.安装路由

把src下的assets还有我们的components的自定的组件删除

App.vue的文件修改,将一下出现的删除即可

    <img src="./assets/logo.png">
    <HelloWorld/>
    
        
import HelloWorld from './components/HelloWorld'
        
 components: {
    HelloWorld
  }

vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装.打开命令行工具,进入你的项目目录,输入下面命令

npm install vue-router@3.5.2 --save-dev

安装好路由之后,可以在我们的node_modules中查找我们的所安装的文件

然后便在src中创建一个router路由目录,在该目录中创建一个index.js来使用路由

index.js的代码

//导入vue
import  Vue from 'vue'
//导入router
import VueRouter from 'vue-router'

    
//安装router
Vue.use(VueRouter);

然后使用npm run dev 启用项目

如果途中遇到报错就是我们的版本号出错,我们的vue项目中的vue-router版本过高

可以参考以下的版本号对应

在项目中中的package.json自己查看下载的各种组件的版本号

也可以通过npm list vue || npm list vue -g命令查看

Vue CLI 4.5以下，对应的是Vue2
Vue CLI 4.5及以上，对应的是Vue3，也可以手动选择Vue2 vue
3.0以下兼容的是element-ui前端组件库;
vue 3.0兼容的是element-plus前端组件库.
vue2搭配vue-router3
vue3搭配vue-router4

六.路由的使用

1.new一个组件任意写一点东西 ,这里我们创建了Hello.vue和main.vue

在App.vue中导入我们的组件

//导入组件Hello
import hello from './components/Hello'
import main from './components/main'

创建一个router文件并创建一个任意名的js

// 导入Vue
import Vue from 'vue
//导入VueRouter
 import VueRouter from 'vue-router'
//导入组件
 import hello from '../components/Hello'
 import main from '../components/main'
 //安装路由
    Vue.use(VueRouter);

//配置导出路由
export default new 	VueRouter({
    routes:[
        {
           //路由路径
            path:'/hello',
            name:'hello',
            //跳转的组件
            component:hello
        },
        {
            //路由路径
            path:'/main',
            name:'main',
            //跳转的组件
            component:main
        }
    ] 
   }     
);

在main.js中导入我们的配置好的路由

// 只要文件中的js是以index开头的文件,我们就不需要写路径名,项目会自动扫描
import router from './router'
    
    new Vue({
        el:'#app',
       //配置路由
        router,
        components:{App},
        template:'<App/>'
    })

在App.vue中配置跳转的路由路径

router-link 相当于我们的a标签  to是对应我们在路由中的path路径
<router-link to="/main">首页</router-link>
<router-link to="/hello" >主页</router-link>
<router-view></router-view>

路由的使用流程

七安装elementUI

3.0以下兼容的是element-ui前端组件库;

vue 3.0兼容的是element-plus前端组件库.

安装elementUI npm install elementUI@2.12.00

安装依赖 npm install

下载sass加载器通过sass来编译安装sass-loader 和 node-sass

npm install --save-dev node-sass
npm install --save-dev sass-loader

在我们的main.js中安装elementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

接下来我们就可以直接在我们的组件中直接使用elemenUI

八.路由嵌套

嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成,

就是我们要在一个路由中,又加一个路由,称之为嵌套路由

我们先编写好组件代码

只需要在我们要嵌套的路由中添加如下

  children:[
        {path: '/user/List',component: userList},
        {path: '/user/Profile', component:userProfile}
      ]

可在elementui中提取页面布局的代码,复制到我们的代码上,复制过来的代码我们需要变更一下代码,换成我们的跳转代码

九. 参数传递及重定向

方法一传递参数

参数传递三步骤

传递参数我们需要在router-link to属性中加一个对象

   1.传递参数
   params: 需要传递参数时我们就需要用上,绑定对象
   router-link to= '{name: '/user/Profile' params:{id: 1}}'
  
   2.接收参数
    这时接收到path中,由path接收参数,由于我们传输的是id,我们只需要在path中绑定id即可
    path :  '/user/Profile/:id'  这时我们就能接收到前端传递过来的的参数
 
  3.取参数
   参数接收后我们需要将参数取出来,自己想在那个组件中取出来就在那个组件中写代码
   {{$route.params.id}}

方法二传递参数

  1.传递参数
   params: 需要传递参数时我们就需要用上,绑定对象
   name传递组件名
   router-link :to= '{name: 'userProfile' params:{id: 1}}'
  
   2.接收参数
    这时接收到path中,由path接收参数,由于我们传输的是id,我们只需要在path中绑定id即可
    children:[
        {
          path: '/user/List/:id',
          name: 'userLis',
          component: userLis
        },
        这时我们就能接收到前端传递过来的的参数
 
  3.取参数
   参数接收后我们需要将参数取出来,自己想在那个组件中取出来就在那个组件中写代码
   由组件传递传递
   
   //我们直接取id就可以了
   {{id}}
   
   export default {
   //这里的id由path中绑定
   props:['id'],
   name: "Profile"
  }

重定向

 重新定义一个path,在path中添加redirect属性,指定重定向到哪

  {
    path: '/gohome',
    redirect: '/main'
  } 

定义好后,在前端 router-link to='/gohome'中设置即可

十. 路由模式与404

路由模式

在网页中的地址我们能看到一直有一个#,对于有强迫症的人们来说这是非常难受的,那我们如何将#去掉而不影响我们打开页面地址呢,接下来就为你解答

路由模式有二种:

hash:路径带#符号,如http://localhost/#/login

history:路径不带#符号, 如http://localhost/login

而路由有两种模式,默认的是第一种模式

当我们改变他时,只需在路由中添加mode属性,在mode中指定模式

export default new VueRouter({{
    mode:'history'
})

404

当我们输入地址时不小心输错时,我们并不知道是地址的问题,这时的我们就会找不着头绪,以至于找大半天才找到问题的所在,这时我们就应该设置404页面,当我们的地址输错时,页面提醒

新建一个404的组件

//导入组件
import not from '../vies/404'

export default new VueRouter({
    routes:[
        {
            path:'*',
            component:not
        }
    ]
})

十一. 钩子函数

to: 路由将要跳转的路径信息

from: 路径跳转前的路径信息

next: 路由的控制参数

next() 跳入下一个页面

next('/path') 改变路由的跳转方向,使其调到另一个路由

next(false) 返回原来的页面

next((vm)+>{}) 仅在begoreRouteEnter中可用,vm是组件实例

1.安装Axios

 npm install axios -s

main.js 引用Axios

import axios from 'axios'

Vue.prototype.axios=axios

在static的目录中添加一个mock的包,包中添加一个data.json

{
  "name": "狂神说Java",
  "url" : "http://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "哭丧硕士",
      "url": "https://blog.kuangsstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

4.在我们的任意子路由中写钩子函数

 //过滤器
  beforeRouteEnter:(to,from,next)=>{
        console.log("进入路由之前");//加载数据
         next(vm => {
           vm.getData();//进入路由之前执行getData
         });
  }, 
  beforeRouteLeave:(to,from,next)=>{
     console.log("进入路由之后")
       next();
   },
  methods:{
    getData:function() {
      this.axios({
        method: 'get',
        url:'http://localhost:8081/static/mock/data.json',
      }).then(function (response){
        console.log(response)
      })
    }
  }

被子不喝酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue项目的使用 2023版最新出炉Vue教程

当我们输入地址时不小心输错时,我们并不知道是地址的问题,这时的我们就会找不着头绪,以至于找大半天才找到问题的所在,这时我们就应该设置404页面,当我们的地址输错时,页面提醒。在网页中的地址我们能看到一直有一个#,对于有强迫症的人们来说这是非常难受的,那我们如何将#去掉而不影响我们打开页面地址呢,接下来就为你解答。这时接收到path中,由path接收参数,由于我们传输的是id,我们只需要在path中绑定id即可。// 只要文件中的js是以index开头的文件,我们就不需要写路径名,项目会自动扫描。
复制链接

扫一扫