从零开发网站在线客服系统（二）vue项目框架基础目录结构
演示网站：gofly.v1kf.com我的微信：llike620
在之前的文章里没有介绍vue项目的目录结构，现在来介绍一下
. |– public | |– favicon.ico | |– index.html |– src | |– assets | | |– … | |– components | | |– … | |– views | | |– … | |– App.vue | |– main.js | |– router.js | |– store.js |– .babelrc |– .env |– .eslintrc.js |– .gitignore |– package.json |– README.md |– yarn.lock
Vue 项目的目录结构通常如下：
public目录存放着静态文件，如 favicon.ico 和 index.html。src目录存放着 Vue 项目的源代码。assets目录存放着需要经过 Webpack 处理的静态资源，如图片、CSS、字体等。components目录存放着 Vue 组件。views目录存放着视图组件。App.vue是 Vue 项目的根组件。main.js是 Vue 项目的入口文件。router.js用于配置项目的路由。store.js用于配置项目的状态管理。.babelrc存放着 Babel 配置。.env存放着环境变量的配置。.eslintrc.js存放着 ESLint 配置。.gitignore用于配置 Git 忽略的文件。package.json存放着项目的依赖、脚本等信息。README.md用于介绍项目的相关信息。yarn.lock用于锁定项目的依赖版本。
router.js介绍
在 router.js 中，我们需要使用 Vue Router 进行路由的配置。我们可以在这个文件中定义各个页面的路径以及对应的组件，并导出一个路由对象。例如：
import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue'Vue.use(Router)
export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import('./views/About.vue') } ] })
store.js介绍
store.js 则是用来管理项目的状态，它使用 Vuex 实现。我们可以在这个文件中定义各种状态以及对应的更新状态的方法，并导出一个 store 对象。例如：
import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)
export default new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })
main.js
我们可以在项目的入口文件中，例如 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')
npm run 相关命令介绍
npm run 命令用于在命令行中运行预定义脚本。通常，这些脚本存储在 package.json 文件中的 scripts 对象中。
比如我的项目中的下面两个命令
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”
},“npm run serve” 和 “npm run build” 可以在命令行中执行这些脚本。