vue安装及使用

小鱼儿 2022-03-26 11:22 306阅读 0赞

一、webstorm的安装：

1、什么是webstorm

WebStorm是jetbrains公司旗下一款JavaScript 开发工具，和IntelliJ IDEA同源。

再多的，可以

2、webstorm安装

一位大神整理的webstorm安装教程，我是按照这个教程安装的。

https://blog.csdn.net/xunciy/article/details/77345663

二、node.js的安装

1、什么是node.js

Node.js是一个Javascript运行环境。

2、node.js安装

同样的，一位大神总结的安装教程，为了不占用c盘空间，在配置NODE\_HOME的时候坎坷万分，不担心c盘空间的，不配置也可以，直接下载到c盘。

https://blog.csdn.net/xmzyjr123/article/details/79428611

3、安装完成node.js，npm也就安装完成了。

npm是node的包管理工具。  
三、cnpm的安装

npm 命令用于从国外的服务器上下载别人做好的模块。 因为是在国外的服务器，有的时候网速会很受影响，其结果就是导致下载会非常卡顿。  
所以这个时候就会用到 cnpm了。这里的c 是 copy的意思，即复制 npm 上面的库。   
把npm 上面的库复制到 国内的服务器上，当需要用的时候，使用 cnpm 命令获取，就会快很多了。

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

其中的-g 是-global 的意思，即全局安装，而不是安装在当前目录下。 一旦全局安装过了，项目就不需要在本地安装也可以使用了。

注意：使用代理安装cnpm

# [为npm设置代理][npm] #

npm全称为Node Packaged Modules。它是一个用于管理基于node.js编写的package的命令行工具。其本身就是基于node.js写的,这有点像gem与ruby的关系。

在我们的项目中，需要使用一些基于node.js的javascript库文件，就需要npm对这些依赖库进行方便的管理。由于我们的开发环境由于安全因素在访问一些网站时需要使用代理，其中就包括npm的repositories网站，所以就需要修改npm的配置来加入代理。

下面简要介绍下npm的配置以及如何设置代理。

## npm获取配置有6种方式，优先级由高到底。 ##

1.  命令行参数。 `--proxy http://server:port`即将proxy的值设为`http://server:port`。
2.  环境变量。 以`npm_config_`为前缀的环境变量将会被认为是npm的配置属性。如设置proxy可以加入这样的环境变量`npm_config_proxy=http://server:port`。
3.  用户配置文件。可以通过`npm config get userconfig`查看文件路径。如果是mac系统的话默认路径就是`$HOME/.npmrc`。
4.  全局配置文件。可以通过`npm config get globalconfig`查看文件路径。mac系统的默认路径是`/usr/local/etc/npmrc`。
5.  内置配置文件。安装npm的目录下的npmrc文件。
6.  默认配置。 npm本身有默认配置参数，如果以上5条都没设置，则npm会使用默认配置参数。

## 针对npm配置的命令行操作 ##

![复制代码][copycode.gif]

npm config set <key> <value> [--global]
       npm config get <key>
       npm config delete <key>
       npm config list
       npm config edit
       npm get <key>
       npm set <key> <value> [--global]

![复制代码][copycode.gif]

在设置配置属性时属性值默认是被存储于用户配置文件中，如果加上`--global`，则被存储在全局配置文件中。

如果要查看npm的所有配置属性（包括默认配置），可以使用`npm config ls -l`。

如果要查看npm的各种配置的含义，可以使用`npm help config`。

## 为npm设置代理 ##

$ npm config set proxy http://server:port
    $ npm config set https-proxy http://server:port

如果代理需要认证的话可以这样来设置。

$ npm config set proxy http://username:password@server:port
    $ npm config set https-proxy http://username:pawword@server:port

如果代理不支持https的话需要修改npm存放package的网站地址。

$ npm config set registry "http://registry.npmjs.org/"

四：vue-cli的安装

什么是 vue-cli 呢？   
vue-cli 是 vue 出来的一个脚手架，可以进行 组件式地开发。  
但是要运用 vue-cli , 必须要有 node.js 和 webpack 的基础，否则里面很多命令既运行不了，也无法理解。

ue-cli 截止目前是出到3了。 接下来的教程都是以3为基础做的。  
  
安装命令：

npm install -g @vue/cli@3.0.1

注意，这个版本号一定要跟，如果不跟，那么就是安装vue-cli 的最新版本。 目前 （2018-08-19） 其最新版本是 3.0.1。 但是如果过几个月，你才看到这个教程的话，说不定 vue-cli 的版本就是 4.0了。 而不同版本的做法区别很多，本教程是基于 3.0.1 做的，所以安装的时候一定要加上 3.0.1 ，否则错版本的教程就没有意义了。

安装成功之后，可以通过如下命令查看版本

vue --version

五：webpack的安装

安装的时候，不要使用 npm， 否则在 windows 上会失败。 请使用 cnpm  
cnpm 是一个国内的镜像，不了解的同学，请跳转到 [cnpm 教程][cnpm]。  
接下来安装 webpack，使用全局安装方式：

cnpm install -g webpack@1.13.2

如图所示安装结束后，运行

webpack

会看到很多的命令参数，其中，最开始的地方会看到版本 ： webpack 1.13.2

[npm]: https://www.cnblogs.com/walkerwang/p/3624909.html
[copycode.gif]: /images/20220326/d21082c103f74a2e8a12f5816f66908b.png
[cnpm]: http://www.how2j.cn/k/nodejs/nodejs-cnpm/1771.html