vue3项目目录结构_代码007(未授权)

本文介绍: 一、vue3项目的目录结构详解 node _modules：通过 npm install 下载安装的项目依赖包public：存放静态资源公共资源，不会被压缩合并—3DMod el：存放.gl b3D模型—fa v icon.ico：网站图标—index.html：首页入口.html 文件 src：项目开发主要文件夹—api—assets：静态文件，存放图片—components：存放组件—store：与vuex 相关—styles：存放样式—utils—view s：界面组件—Ap p.vue：根组件

node _modules：通过 npm install 下载安装的项目依赖包
public：存放静态资源公共资源，不会被压缩合并
—3DMod el：存放.gl b3D模型
—favicon.ico：网站图标
—index.html：首页入口.html 文件
 src：项目开发主要文件夹
—api
—assets：静态文件，存放图片
—components：存放组件
—store：与vuex 相关
—styles：存放样式
—utils
—view s：界面组件
—Ap p.vue：根组件
—main.js：入口文件
—router.js：存放路由，实现界面跳转
.git i g nor e：用来配置那些文件不归git 管理
 package.json：项目配置和包管理文件（项目依赖和技术）
README.md：说明文档，主要看项目运行的命令
 vue.config.js：项目配置信息：跨域 proxy 代理

<%= BASE_URL %&g t;
<%= htmlWe b packPlugin.options.title %&g t;
将vue 实例挂载到id为#app的dom上

&lt;!DOCTYPE html&gt;
&lt;html lang=""&gt;
<head&gt;
  <meta charset="utf-8"&gt;
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_3273220_qxa4nju4npj.css">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <!-- 将vue实例挂载到id为#app的dom上 -->
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <style>
   	/* 公共样式可以写在这里 */
  </style>
</body>
</html>

导入组件、路由等
vue3使用 createApp这个api 返回一个应用实例，并且可以链式调用；这也是与vue2.0不同之处，vue2.0是通过 new Vue() 来创建一个 vue实例的
createApp(App).use(store).use(router).mount(‘#app’);

import {
  createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import * as Api from './api/index.js'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'dayjs/locale/zh-cn' //中文
import locale from 'element-plus/lib/locale/lang/zh-cn' //中文
import * as ElIcons from '@element-plus/icons-vue'
import permission from '@/constants/permission';
import UUID from 'vue-uuid';
import "vis/dist/vis.css";

var cesium = require('cesium/Cesium.js');
var widgets = require('cesium//Widgets/widgets.css');

// 创建实例
const app = createApp(App);

// 全局变量、属性
app.config.globalProperties.$api = Api
app.config.globalProperties.Cesium = cesium
app.config.globalProperties.Widgets = widgets

// 添加widow对象
window.Cesium = cesium;

// 统一注册Icon图标
for (const iconName in ElIcons) {
  app.component(iconName, ElIcons[iconName])
}

// 自定义指令实现权限控制
app.directive("permission", permission)

// app.use() 注册全局组件
app.use(ElementPlus, {
  locale
});
app.use(store);
app.use(router);
app.use(UUID);

// 应用实例挂载到#app中，一定要放在最后面
app.mount('#app');

a. scripts
可以使用 npm run serve或yarn serve 查看项目效果，就是因为有package.json中的scripts起到了作用。
能使用vue–cli–service是因为vue–cli 自动安装了cli–service这个工具
 serve : 在开发时用于查看效果的命令，视频中演示看一下效果
 build : 打包打码，一般用于生产环境中使用
lint : 检查代码中的编写规范
b. dependencies 生产环境 devDependencies 开发环境
这两个都是用来记录安装包信息的，
生产环境：就是代码已经上线，放到了正式的服务器上，公司开始运营去赚钱的代码。
开发环境：作为一个程序员，每天作的事情都是在开发环境中，编写代码、测试代码、修改 Bug。也就说这些代码没有上线。
dependencies下的包是生产环境中必须用到的，当然开发环境也需要。devDependencies是只有开发环境中使用的，上线后这些包就没用了，打包后也不会打包进去的代码。


  "name": "simulator",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^1.1.4",
    "axios": "^0.26.1",
    "cesium": "*",
    "core-js": "^3.8.3",
    "element-plus": "^2.1.2",
    "file-loader": "^6.2.0",
    "js-md5": "^0.7.3",
    "node-sass": "^7.0.1",
    "nprogress": "^0.2.0",
    "pdfjs-dist": "^2.4.456",
    "sass-loader": "^12.6.0",
    "url-loader": "^4.1.1",
    "vis": "^4.21.0-EOL",
    "vue": "^3.2.13",
    "vue-pdf": "^4.3.0",
    "vue-router": "^4.0.14",
    "vue-uuid": "^3.0.0",
    "vue3-pdf": "^4.2.6",
    "vuedraggable": "^4.1.0",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-proposal-private-methods": "^7.16.11",
    "@types/pdfjs-dist": "^2.10.378",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "copy-webpack-plugin": "^5.1.2",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "vue/multi-word-component-names": "off",
      "no-unused-vars": "off",
      "no-undef": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

注意，不同的node版本，安装依赖包可能会报错
在vue3项目中，我使用的node版本是 v14.15.1
推荐 nvm对不同的node版本进行管理
nvm :node版本管理器

如果在其他.vue文件中你使用的是<script setup>,你会发现直接使用this.$api会报错，
这里提供一个新的api：getCurrentInstance 获取vue当前实例，挂载在全局上的东西都需要通过实例去拿
未亲测过，感兴趣的可以亲测过告诉我可行性~

import { getCurrentInstance } from "vue";
// 拿到实例
const _this = getCurrentInstance ();
// 在实例中有个ctx上下文
_this.ctx.$api

我直接用的是<script>即vue2.0写法编写js代码，则可以直接使用this.$api

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

vue 存放项目

一、vue3项目的目录 结构 详解

二、部分主要文件 详解

1、index.html

2、main.js（main.ts）

3. package.json

三、其他说明

1. node 版本 错误

2. 如何 调用 全局 属性

3. vue文件中应用vue3.0的api

发表回复取消回复

一、vue3项目的目录结构详解

二、部分主要文件详解

1、index.html

2、main.js（main.ts）

3. package.json

三、其他说明

1. node版本错误

2. 如何调用全局属性

3. vue文件中应用vue3.0的api

相关文章

发表回复 取消回复

1. node 版本错误

发表回复取消回复