本文介绍: 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录)如果没有 node_modules 目录,会在当前执行npm 命令目录生成node_modules 目录assets:一般放置静态资源(一般放置多个组件公用的静态资源需要注意放置在assets文件夹静态资源webpack打包时,会把静态资源当做一个模块打包js文件里面。npm 的包安装分为本地安装local),全局安装global)两种,从命令行来看,差别只是有没有g而已,比如。

目录

一、安装node 

二、安装NPM

1、本地安装和全局安装

2、通过Node.js官方安装程序安装

3、通过Homebrew安装

三、NPM常用命令

1、查看模块的版本号

2、安装指定版本

3、卸载模块

4、更新模块

5、查看模块信息

6、查看模块地址

7、更新命令

8、卸载NPM

四、安装Vue

五、初始化脚手架CLI

六、创建vue项目

七、项目一些配置

1、项目文件目录

2、项目运行起来,浏览器自动打开

3、eslint校验工具的关闭:

4、安装less 、less-loader

5、安装vue-router

一、安装node 

NPM是一个极为重要的Node.js软件包管理器,它允许用户轻松安装更新卸载任何需要的Node.js软件包。

Node.js:NPM是随Node.js一起发布的,如果没有安装Node.js可以Node.js官网下载

方式一:下载安装pkg(推荐)

安装完成后,可以运行以下命令检查是否成功安装了这些软件

$ nodev

方式二:brew 容易失败(可能需要科学上网会快些)

Homebrew:它是一个Mac OS X下的包管理器可以在Homebrew网上找到详细的安装说明。

brew install node

如果顺利地输出版本信息,则表明这些软件已经成功安装。

二、安装NPM

1、本地安装和全局安装

npm 的包安装分为本地安装(local),全局安装(global)两种,从命令行来看,差别只是有没有-g而已,比如

npm install <模块名>            # 本地安装
npm install <模块名>     -g      # 全局安装
// install可以缩写为i

本地安装
安装包放在 ./node_modules 下(运行 npm 命令时所在的目录)如果没有 node_modules 目录,会在当前执行npm 命令的目录下生成node_modules 目录
可以通过 require() 来引入本地安装的包

全局安装
安装包放在 /usr/local 下或者你 node 的安装目录
可以直接在命令行里使用

2、通过Node.js官方安装程序安装

方式一:

可以Node.js官网下载Mac的.pkg文件,并按照提示安装。安装完成后,NPM已经随Node.js一起安装了。

3、通过Homebrew安装

可以使用以下命令在终端中安装NPM:

brew install node

三、NPM常用命令

1、查看模块版本号

npm <模块名> grunt

2、安装指定版本

npm install 默认安装最新版本,如果想要安装指定版本,可以在库名称后加 @版本号

npm install <模块名>@latest
npm install <模块名>@0.1.1
npm install <模块名>@”>=0.1.0 <0.2.0″

3、卸载模块

我们可以使用以下命令来卸载 Node.js 模块

npm uninstall <模块名>

 建议直接删除node-modules文件夹

4、更新模块

npm update <模块名>    

5、查看模块信息

npm  list  <模块名>    

6、查看模块地址

npm view <模块名> repository.url

很多包的地址都是托管在github

7、更新命令

为了获得最新的软件包并修复可能存在的错误漏洞需要定期更新npm。以下是更新npm的三种方法

1、通过npm自身更新
可以使用以下命令更新npm:

npm install npm -g

2、通过Homebrew更新
可以使用以下命令更新npm:

brew update
brew upgrade node

8、卸载NPM

$ brew uninstall node
$ npm uninstall npm -g
$ sudo rm -rf /usr/local/{lib/node{,/.npm,_modules},bin,share/man}/{npm*,node*,man1/node*}

四、安装Vue

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify模块打包器配合使用。同时 Vue 也提供配套工具开发单文件组件

npm install vue@^3

五、初始化脚手架CLI

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI

npm install -g @vue/cli

六、创建vue项目

vue create myproject

七、项目一些配置

1、项目文件目录

public:放置一些静态资源图片),需要注意放在public文件中的静态资源,webpack进行打包时会原封不动的打包到dist文件夹中

src(源代码文件夹):

assets:一般放置静态资源(一般放置多个组件公用的静态资源)需要注意放置在assets文件夹的静态资源在webpack打包时,会把静态资源当做一个模块打包在js文件里面

components: 一般放置的是非路由组件全局组件

App.vue: 唯一的根组件

main.js: 程序入口文件,也是整个程序当中最先执行的文件

babel.config.js:配置文件babel相关)

package.json依赖关系

2、项目运行起来,浏览器自动打开

package.json文件

"scripts": {

"serve": "vue-cli-service serve --open",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

},
3、eslint校验工具关闭:

vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,//运行是否自动浏览器打开
  lintOnSave: true,//关闭eslint校验
})
4、安装lesslessloader

jsconfig.json文件

src文件夹简写方法,配置别名

配置别名@提示【@代表的是src文件夹,这样将来文件过多,找的时候方便】

{

compilerOptions”: {

target“: “es5″,

module“: “esnext“,

baseUrl“: “./”,

moduleResolution”: “node”,

paths”: {

“@/*”: [

“src/*”

]

}

},

“exclude”: [“node_modules“, “dist“]

}

5、安装vue-router

npm install –save vue-router

–save:可以让你安装的依赖,在package.json文件当中进行记录 

原文地址:https://blog.csdn.net/RreamigOfGirls/article/details/134526175

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_8865.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注