2.介绍vue脚手架
yeb 项目名称
- node_modules 依赖文件——通过npm install进行下载依赖
- public 公用的目录
- favicon.ico logo图标
- index.html 页面入口、首页(模板页)——实际开发用不到
- src 源码目录
- assets 静态资源文件
- components 组件目录
- router 路由目录
- index.js
//先把跳转的一些组件导入进来
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
//使用路由依赖
Vue.use(VueRouter)
//配置路由
const routes = [
{
path: '/',//跳转路径
name: 'Home',//路由名称
component: Home//路由要跳转的组件
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
//不提前导入组件,在使用的时候导入组件——懒加载
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
routes
})
export default router
- views 页面目录
- Home.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
- App.vue
<template>
<div>
<div>
//跳转链接
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
//渲染路由匹配组件
<router-view/>
</div>
</template>
- main.js 项目程序入口
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false //关闭浏览器控制台关于环境相关提示
new Vue({
router,
render: h => h(App)
}).$mount('#app')//手动挂载点
- .gitignore Git配置文件
- babel.config.js babel配置文件——主要功能是:将ES6语法转换成ES5
- package.json vue项目配置主文件
{
"name": "yeb",//项目名称
"version": "0.1.0",//版本号
"private": true,//是否是私有的
"scripts": {//封装常用命令
"serve": "vue-cli-service serve",//启动服务
"build": "vue-cli-service build" //构建项目
},
"dependencies": {//正式环境下用到的依赖
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
"devDependencies": {//开发环境下用到的依赖
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"
},
}
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 Eternal Night
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果