Vue项目 目录结构

• 当我们把项目文件夹用

  vscode

  等软件打开会发现很多文件。

  > node_modules         -> 依赖包文件
  > pubilc               -> 公共静态资源
     index.html          -> 网页模板
  > src                  -> 页面代码
    > assets             -> 静态资源
    > components         -> 组件
    > network            -> 封装的网络请求
    > router             -> 路由
    > store              -> vuex状态管理
    > views              -> 页面
      App.vue            -> 主vue模板
      main.js            -> 全局配置
  .browserslistrc        -> 适配的浏览器
  .eslintrc              -> 规范代码格式
  .gitignore             -> git上传忽视文件
  babel.config.js        -> babel配置文件
  jsconfig.json          -> 配置js属性和路径别名等信息
  package-lock.json      -> 实际项目的依赖等信息
  package.json           -> 项目依赖配置等信息
  README.md              -> 项目介绍文档
  vue.config.js          -> vue配置文件
             

  | -- node_modules           -> 依赖包文件
  | -- pubilc                 -> 公共静态资源
      | -- index.html         -> 网页模板
  | -- src                    -> 页面代码
  | -- assets                 -> 静态资源
  | -- components             -> 组件
  | -- network                -> 封装的网络请求
  | -- router                 -> 路由
  | -- store                  -> vuex状态管理
  | -- views                  -> 页面
  | -- App.vue                -> 主vue模板
  | -- main.js                -> 全局配置
  | -- .browserslistrc        -> 适配的浏览器
  | -- .eslintrc              -> 规范代码格式
  | -- .gitignore             -> git上传忽视文件
  | -- babel.config.js        -> babel配置文件
  | -- jsconfig.json          -> 配置js属性和路径别名等信息
  | -- package-lock.json      -> 实际项目的依赖等信息
  | -- package.json           -> 项目依赖配置等信息
  | -- README.md              -> 项目介绍文档
  | -- vue.config.js          -> vue配置文件
             

• 如何将代码渲染到页面上

  components

  =>

  views

  (页面 引用 组件)

  views

  =>

  App.vue

  (App.vue 引用 页面)

  App.vue

  =>

  main.js

  =>

  index.html

  (main.js 通过

  createApp

  方法将

  App.vue

  挂载到

  index.html

  页面中)

  总过程

  components

  =>

  views

  =>

  App.vue

  =>

  main.js

  =>

  index.html

• 启动一个 vue项目

  打开项目文件夹所在终端输入

  npm run serve

  启动项目

  DONE  Compiled successfully in 110ms                                                                                                                 23:49:28
  
    App running at:
    - Local:   http://localhost:8080/
    - Network: http://192.168.43.48:8080/
             

• .vue文件 页面结构

  <template>
    <div id="">
      (html部分)
    </div>
  </template>
  
  <script>
  export default {
    name: "",
      (js部分)
  }
  </script>
  
  <style>
      (css部分)
  </style>
             

  每一个

  .vue

  文件都是一个

  vue

  模板组件。只不过是有的

  .vue

  作为组件，有的

  .vue

  作为网页，各个文件相互引用。