Vue项目

使用vs打开Vue项目

运行：
终端命令：

npm run serve

初次打开的是App.vue页面

修改服务器端口

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  devServer: {        //增加的部分，用于配置端口号
    port: 7000
  }
})

开发流程

项目流程

当前访问的是Vue的默认首页：index.html (项目中：public/index.hhtml)
在index.html中，默认引入入口文件：main.js
main.js中引入了很多的公共组件

main.js

import Vue from 'vue'
import App from './App.vue'         //导入同目录下的App.vue并命名为App
import router from './router'

Vue.config.productionTip = false

new Vue({
	router,
	render: h => h(App)
}).$mount('#app')               //App实例挂载到#app元素（id= app的元素）

挂载的等价方式：

new Vue({
	el: "#app",
	router: router, 
	render: h => h(App)
})

Vue.vue：
>template：包含原生heml代码
>script：控制模板当中数据来源和行为
>style：控制CSS样式

引入ElementUI

npm i element-ui -S

第一个页面：views/element/ElementView.vue
第一个页面创建完成后在Vue.vue引入这个页面组件：