WEB前端
  1. Vue
    1. WEB前端 - Vue - 安装
    2. WEB前端 - Vue - webpack目录结构与第一个项目示例
    3. WEB前端 - Vue - 基础语法
    4. WEB前端 - Vue - 条件语句与循环语句
    5. WEB前端 - Vue - 函数与计算属性
    6. WEB前端 - Vue - 监听属性
    7. WEB前端 - Vue - 样式绑定
    8. WEB前端 - Vue - 表单
    9. WEB前端 - Vue - 组件详解
    10. WEB前端 - Vue - 路由
    11. WEB前端 - Vue - 生命周期钩子函数

WEB前端 - Vue - webpack目录结构与第一个项目示例

程序员日记      2019-09-11

我们使用npm安装了基于webpack框架的vue,我们得了解一下webpack框架创建项目的目录结构

目录结构

build: 项目构建(webpack)相关代码

config: 配置目录,包括端口号等。我们初学可以使用默认的。

node_modules: npm 加载的项目依赖模块

src: 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  --assets: 放置一些图片,如logo等。

  --components: 目录里面放了一个组件文件,可以不用。

  --App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。

  --main.js: 项目的核心文件。

static: 静态资源目录,如图片、字体等。

test: 初始测试目录,可删除

.xxxx文件: 这些是一些配置文件,包括语法配置,git配置等。

index.html: 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。

package.json: 项目配置文件。

README.md: 项目的说明文档,markdown 格式


第一个项目示例

我们修改src/App.vue文件

<template>
  <div id="app">
    {{message}}
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function(){
   return{
    message:"你好,欢迎来到程序员日记"
    }
  },
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


编译

#npm install(如果没有下载过依赖)
npm run dev


访问

http://127.0.0.1:8080