Vue-Vuex-Router 项目教程
vue-vuex-router vueCli3搭建的vue-vuex-router开发模版,PC、Mobile两个分支开箱即用,支持scss、vuex、axios、多语言、过滤器、仓库快速提交等 项目地址:https://gitcode.com/gh_mirrors/vu/vue-vuex-router
1. 项目的目录结构及介绍
vue-vuex-router/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── router/
│ ├── store/
│ ├── views/
│ ├── App.vue
│ └── main.js
├── .editorconfig
├── .env
├── .env.development
├── .env.production
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── init.sh
├── package.json
├── push.sh
└── vue.config.js
目录结构介绍
public/
: 包含静态文件,如 index.html
。src/
: 源代码目录,包含项目的主要代码。
assets/
: 静态资源文件,如图片、样式文件等。components/
: Vue 组件文件。router/
: Vue Router 配置文件。store/
: Vuex 状态管理文件。views/
: 页面视图组件。App.vue
: 根组件。main.js
: 入口文件。 .editorconfig
: 编辑器配置文件。.env
: 环境变量配置文件。.env.development
: 开发环境变量配置文件。.env.production
: 生产环境变量配置文件。.gitignore
: Git 忽略文件配置。LICENSE
: 项目许可证。README.md
: 项目说明文档。babel.config.js
: Babel 配置文件。init.sh
: 初始化脚本。package.json
: 项目依赖和脚本配置。push.sh
: 提交脚本。vue.config.js
: Vue CLI 配置文件。
2. 项目的启动文件介绍
入口文件 main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
引入 Vue、App 组件、路由配置和状态管理配置。 创建 Vue 实例并挂载到 #app
元素上。
根组件 App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
/* 样式代码 */
</style>
定义根组件模板和样式。 使用 <router-view/>
渲染路由视图。
3. 项目的配置文件介绍
Vue CLI 配置文件 vue.config.js
module.exports = {
devServer: {
port: 8080,
open: true
},
css: {
sourceMap: true
}
};
配置开发服务器端口和自动打开浏览器。 启用 CSS 源映射。
Babel 配置文件 babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
};
环境变量配置文件 .env
VUE_APP_BASE_URL=/
开发环境变量配置文件 .env.development
VUE_APP_BASE_URL=http://localhost:8080
生产环境变量配置文件 .env.production
VUE_APP_BASE_URL=https://production.example.com
项目依赖和脚本配置 package.json
{
"name":
vue-vuex-router vueCli3搭建的vue-vuex-router开发模版,PC、Mobile两个分支开箱即用,支持scss、vuex、axios、多语言、过滤器、仓库快速提交等 项目地址:https://gitcode.com/gh_mirrors/vu/vue-vuex-router