node.js及npm、vue等js类框架中@的用法-优快云博客

经常在node.js及npm、vue等框架或命令中见到@符号出现，很多小伙伴们不知道是什么含义，今天在这里总结一下。

首先，“@”是一个符号，电子信箱中意义为“at”，即“某用户”在“某服务器”。@符号在nodejs中用途也非常广泛，笔者总结了下，大致有四类，分别如下：

一、利用npm安装包时，附着于包的名字后面，用于指定版本号。如：

npm install --save-dev react-router@2.8.1  ##意思是安装版本号为2.8.1的包react-router
npm install cnpm@latest -g ##安装cnpm最新版本的包

二、在npm中，与“/”相结合，置于包的名字前，表示该包的范围，即指示该包属于某个用户或组织，是该用户或组织提供的私有或公有包。如：

"dependencies": {
    "@testing-library/react": "^13.4.0", ##表示属于testing-library的名为react的包，版本为13.4.0以上
    "@testing-library/user-event": "^13.5.0", ##表示属于testing-library的名为user-event的包，版本为13.5.0以上
    "react": "^18.2.0",
  }

三、node.js中，符合ES6标准的import命令中出现的@，如 import {getJson, del} from '@/model/apiUtils'，这个@符号表示配置中指定的目录，意思是从@所代表的目录中开始查阅，是属于webpack配置命令的一种写法。

在 js 中 import 相对路径代码的时候经常出现路径层级较深的情况，引入起来比较麻烦（虽然 webstorm 支持提示简化了不少），所以在 webpack 中可以做如下配置：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@':resolve('src'),
      'styles':resolve('src/assets/styles'),
      // 注意： 静态资源通过src，不能这么设置。
      // "@assets": path.join(__dirname, "..", "src", "assets"),
    }
}

　　于是 import {getJson, del} from '../../../../model/apiUtils'; 就可以写成 import {getJson, del} from '@/model/apiUtils';

四、Vue的元素标签中，@”是指令“v-on”的缩写。如以下代码：

<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
 <a @click="doSomething">...</a>

好了，关于在前端nodejs中相关项目中经常出现的@符号就总结到此，还有哪些小编不知道的用法，还请博友在下面留言补充，以完善知识，利于学习之用。

转载于：https://www.cnblogs.com/eminer/p/17027507.html