快速搭建Vue-cli

最新推荐文章于 2022-04-18 10:07:34 发布

Joker_DJ dear

最新推荐文章于 2022-04-18 10:07:34 发布

阅读量142

点赞数

文章标签： vue nodejs

本文链接：https://blog.csdn.net/jokerdj233/article/details/113848731

版权

搭建vue-cli步骤

下载nodejs

https://nodejs.org/zh-cn/download/
在这里插入图片描述

一直下一步安装完成即可

查看安装是否成功

node -v
npm -v

在这里插入图片描述

设置淘宝镜像加速器

npm install cnpm -g

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

安装vue-cli

cnpm install vue-cli -g #全局
# 测试是否安装成功
vue list

第一个vue-cli

vue init webpack vue-demo

在这里插入图片描述
初学建议全选NO

依次运行

cd vue-demo
npm install
npm run dev

在这里插入图片描述

访问http://localhost:8080/

目录结构

在这里插入图片描述

安装webpack

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

测试安装成功

webpack -v

使用webpack打包

新建项目
新建modules目录
在modules下新建js文件
hello.js

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

}

main.js

var hello=require("./hello")
hello.sayHi()

新建webpack配置文件webpack.config.js

module.exports={
  entry:'./modules/main.js', //主入口
  output:{//输出目录 
      filename:"./js/bundle.js" //输出文件名称
  }
};

在这里插入图片描述
运行webpack

新建html测试js

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

</body>
</html>

在这里插入图片描述

Vue路由配置

目录结构
在这里插入图片描述

新建页面Content.vue,Joker.vue,Main.vue用于页面跳转
导入vue-router

npm install vue-router

引入vue-router

新建路由配置文件 router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

//路由页面导入
import Content from "../components/Content";
import Main from "../components/Main";
import Joker from "../components/Joker";

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

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path:'/content',
      //路由名字
      name:'content',
      //跳转的组件
      component:Content
    },
    {
      //路由路径
      path:'/main',
      //路由名字
      name:'main',
      //跳转的组件
      component:Main
    },
    {
      //路由路径
      path:'/joker',
      //路由名字
      name:'joker',
      //跳转的组件
      component:Joker
    },
  ]
})

App.vue

<template>
  <div id="app">
    <h1>test</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-link to="/joker">joker</router-link>
    <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>

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.config.productionTip = false

//显示声明使用VueRouter
Vue.use(router)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//安装路由
  components: { App },
  template: '<App/>'
})

整合elementUI

在这里插入图片描述

嵌套路由配置

index.js
在这里插入图片描述

参数传递

<router-link :to="{name:'Content',params:{id:1} }">内容</router-link>

通过props传递参数

展示

重定向

在这里插入图片描述
{ path:'/gohome', redirect: '/main',//重定向 }

404和路由钩子

去除#号
在这里插入图片描述

export default new Router({
  mode:'history',
  routes: [
    {
      path:'/',
      name:'Index',
      component:Index
    }
  ]
})

404处理
新建404页面导入路由配置路由地址即可
在这里插入图片描述

路由钩子
在这里插入图片描述
分别为进入路由之前
分别为进入路由之后
分别为进入路由修改

Build打包注意事项

将config/index.js的build模块的assetsPublicPath 设置为’./’ 否则打包出来的页面为空白
设置webpack.prod.conf.js下的module的extract为false,否则打包的图标不生效

Joker_DJ dear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫