• Vue项目

    使用vs打开Vue项目

    在这里插入图片描述

    运行：
    终端命令：

    npm run serve

    • 1

    初次打开的是App.vue页面

    修改服务器端口

    vue.config.js

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    开发流程

    项目流程

    当前访问的是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的元素）

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    挂载的等价方式：

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    引入ElementUI

    npm i element-ui -S

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