JavaWeb开发_Web前端_前端工程化

Vue项目-创建

• 命令行: vue create vue-project01
• 图形化界面: vue ui

Vue项目-目录结构

• node_modules: 项目的依赖包
• public: 项目的静态文件
• src: 项目的源代码
  
• package.json: 模块的基本信息, 项目开发所需模块, 版本信息
• vue.config.js: 保存vue配置的文件, 如: 代理, 端口的配置等

Vue项目-启动

• 图形化启动:
  
• 命令行启动: npm run serve

Vue项目-配置端口

打开vue.config.js文件, 代码如下:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 修改端口为7000
  devServer: {
    port: 7000
  }
})

Vue项目开发流程

根组件

// 模板部分, 生成HTML代码
<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

// 控制模板的数据来源和行为
<script>
export default {
  data() {
    return {
      message: "Hello Vue2",
    };
  },
};
</script>

// css样式部分
<style>
</style>

参考

黑马程序员. JavaWeb开发教程