快速搭建Vue-cli

2023-11-27 15:12:44 浏览数 (2)

搭建vue-cli步骤

下载nodejs

https://nodejs.org/zh-cn/download/

一直下一步安装完成即可

查看安装是否成功

代码语言：javascript复制
node -v
npm -v

设置淘宝镜像加速器

代码语言：javascript复制
npm install cnpm -g

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

安装vue-cli

代码语言：javascript复制
cnpm install vue-cli -g #全局
# 测试是否安装成功
vue list

第一个vue-cli

代码语言：javascript复制
vue init webpack vue-demo

初学建议全选NO

依次运行

代码语言：javascript复制
cd vue-demo
npm install
npm run dev

访问http://localhost:8080/

目录结构

安装webpack

代码语言：javascript复制
npm install webpack -g
npm install webpack-cli -g

测试安装成功

代码语言：javascript复制
webpack -v

使用webpack打包

  1. 新建项目
  2. 新建modules目录
  3. 在modules下新建js文件 hello.js
代码语言：javascript复制
//暴露一个方法
exports.sayHi=function () {
    document.write("<h1>Joker DJ</h1>")

}

main.js

代码语言：javascript复制
var hello=require("./hello")
hello.sayHi()

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

代码语言：javascript复制
module.exports={
  entry:'./modules/main.js', //主入口
  output:{//输出目录 
      filename:"./js/bundle.js" //输出文件名称
  }
};

运行webpack

新建html测试js

代码语言：javascript复制
<!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路由配置

目录结构

  1. 新建页面Content.vue,Joker.vue,Main.vue用于页面跳转
  2. 导入vue-router
代码语言：javascript复制
npm install vue-router
  1. 引入vue-router

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

代码语言：javascript复制
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

代码语言：javascript复制
<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

代码语言：javascript复制
// 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

参数传递

代码语言：javascript复制
<router-link :to="{name:'Content',params:{id:1} }">内容</router-link>

通过props传递参数

展示

重定向

{ path:'/gohome', redirect: '/main',//重定向 }

404和路由钩子

去除#号

代码语言：javascript复制
export default new Router({
  mode:'history',
  routes: [
    {
      path:'/',
      name:'Index',
      component:Index
    }
  ]
})

404处理 新建404页面 导入路由 配置路由地址即可

路由钩子

分别为进入路由之前 分别为进入路由之后 分别为进入路由修改

Build打包注意事项

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

0 人点赞