当前位置：首页 > article >正文

main.js_vue

article 2025/9/15 9:30:28

下载依赖包：cnpm install 或者cnpm i

启动项目：npm run dev

vue如何加载main.js

如果你是用vue.js官网提供的脚手架工具并沿用默认配置的话，你执行npm run dev的时候会出来页面，是因为你根目录下的package.json文件里script配置了"dev": "node build/dev-server.js"，也就是其实执行的是dev-server.js这个文件，里面有定义var webpackConfig = require('./webpack.dev.conf');因为我们这个脚手架工具里是用webpack来打包项目文件的，依赖的webpack.dev.conf文件里又定义了var baseWebpackConfig = require('./webpack.base.conf');在这个依赖webpack.base.conf文件里面entry入口文件就配置了app: './src/main.js'，所以当你运行npm run dev的时候就从main.js这个入口文件开始执行了

main.js讲解

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', //绑定到app 这个app为App.vue的id，通过el将main.js和App.vue进行绑定
  router, // 路由的实体，进行页面跳转
  template: '<App/>', //模板 不太懂
  components: { App } //组件 不太懂
})

路由、组件、模板的关系

1、定义模板
const Foo = { template: '<div>foo</div>' } 
const Bar = { template: '<div>bar</div>' }
2、定义路由 
//每个路由应该映射一个组件。 应该说一个路径映射一个组件
const routes = [
 { path: '/foo', component: Foo }, 
 { path: '/bar', component: Bar } 
]
3、创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({ 
　　routes 
})
4. 创建和挂载根实例
const app = new Vue(
　　{ router }
).$mount('#app')