目录结构
package.json
: 描述这个NPM包的所有相关信息,包括作者、简介、包依赖、构建等信息,格式是严格的JSON格式。和java的maven的pom文件作用一样。
node_modules
: 依赖需要下载后才能使用,存在依赖包的地方。使用npm install
安装依赖
babel.config.js
: Babel 是一个 JavaScript 编译器。Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
babel.config.js是项目范围配置,主要用于以下功能:
-
以编程方式创建配置
-
编译node_modules
public
:存储静态资源,不经过webpack的打包处理
src
: 源码文件夹
assets
: 存储静态资源,通过相对路径被引入,这类引用会被webpack处理;
components
:存放组件
App.vue
:根组件
main.js
:入口文件
启动后,应用会先访问public下的index.html,由于其定义了一个id=app的div,main.js做为入口文件,会new一个Vue实例,将其挂载到app上,并且注册了一个组件,就是App.vue。
1.在package.json的
dependencies中添加"vue-router": "^3.5.3",并npm install
2.创建router文件,并添加
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
});
export default router
3.在main.js添加router的引入:
import Vue from 'vue'
import App from './App.vue'
import router from "./router";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
}).$mount('#app')