在之前的文章里没有介绍vue项目的目录结构，现在来介绍一下
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
-
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')
标签：vue,项目,--,js,Vue,router,import From： https://www.cnblogs.com/taoshihan/p/17091288.html