快速搭建Vue-cli
搭建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,否则打包的图标不生效
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-11-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
腾讯云服务器利旧
云服务器（Cloud Virtual Machine，CVM）提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源，适应变化的业务需求，并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本，简化 IT 运维工作。