npm（包管理器）安装vue

柔情只为你懂 2022-06-15 03:37 405阅读 0赞

最近工作前端开发上，准备学习vue.js  
该框架可以直接script引用加载，也可以通过npm包管理器安装。

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

详细的安装流程和中文文档： [https://vuefe.cn/v2/guide/installation.html][https_vuefe.cn_v2_guide_installation.html]  
国内流行的镜像 ：[http://riny.net/2014/cnpm/][http_riny.net_2014_cnpm]

**那么npm是什么呢？**  
官方解释：  
Node.js是JavaScript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。  
包含关系，nodejs中含有npm，比如说你安装好nodejs，你打开cmd输入npm -v会发现出啊线npm的版本号，说明npm已经安装好。  
所以；  
npm是nodejs的包管理器（package manager）。我们在node.js上开发时，会用到很多别人已经写好的javascript代码，如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm。  
有点类似linux里面里的yum下载，方便简单。  
大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来。

**安装流程**

1.安装npm

1.  \#\#安装npm使用淘宝镜像\#\#
2.  npm install -g cnpm –registry=https://registry.npm.taobao.org

![save_snippets_01.png][]

##安装npm##
        npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安装vue

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#\# 全局安装 vue-cli\#\#
2.  npm install -g vue-cli

![save_snippets_01.png][]

## 全局安装 vue-cli##
        npm install -g vue-cli

3.创建vue工作项目

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#\# 创建一个基于 “webpack” 模板的新项目
2.  vue init webpack my-project
3.  
4.  ? Project name 项目名
5.  ? Project description 项目名描述
6.  ? Author 作者邮箱
7.  ? Use ESLint to lint your code? 是否需要ESlist语法检查
8.  ? Setup unit tests with Karma + Mocha? 是否需要单元测试
9.  ? Setup e2e tests with Nightwatch? Yes是否需要e2e测试

![save_snippets.png][]

## 创建一个基于 "webpack" 模板的新项目
        vue init webpack my-project
    
    ? Project name 项目名
    ? Project description 项目名描述
    ? Author 作者邮箱
    ? Use ESLint to lint your code? 是否需要ESlist语法检查
    ? Setup unit tests with Karma + Mocha? 是否需要单元测试
    ? Setup e2e tests with Nightwatch? Yes是否需要e2e测试

4.安装vue依赖

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#\#下载依赖\#\#
2.  npm install

![save_snippets_01.png][]

##下载依赖##
       npm install

5.运行项目

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#\#运行vue\#\#
2.  npm run dev

![save_snippets_01.png][]

##运行vue##
        npm run dev

**安装成功后，会显示这个页面**  
![这里写图片描述][SouthEast]

[https_vuefe.cn_v2_guide_installation.html]: https://vuefe.cn/v2/guide/installation.html
[http_riny.net_2014_cnpm]: http://riny.net/2014/cnpm/
[save_snippets_01.png]: /images/20220615/61e769b94f2a4a5fb04e5f0e2e7a7732.png
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/2021096
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/2021096/fork
[save_snippets.png]: /images/20220615/d0fe530d5c284552a001b773d4165700.png
[SouthEast]: /images/20220615/4a31a72c592c44fcb3ef3519ac501046.png