NPM 安装 Vue.js

前期了解

1、npm

Node.js下的包管理器，安装Node.js 后，会自动安装上

2、webpack

它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包

3、vue-cli 脚手架构建工具

用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

 

NPM安装

1、从官网上下载下载Node.js：https://nodejs.org/en/

2、安装，选择安装目录，然后一路点击next ，安装完成

打开CMD

 

改变NPM本地仓库文件路径

Node.js 安装成功后，会自动在AppData\Roaming 生成缓存目录(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们把这个目录移到 D:\nodejs下面来，并创建node_global（用来存放NPM全局安装的包）

先如下图建立2个目录

然后运行以下2条命令

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global

 

配置镜像站

因为有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

然后等待，没报错表示安装成功

 

输入命令npm config list 显示所有配置信息，我们关注一个配置文件

C:\Users\Administrator\.npmrc

使用文本编辑器编辑它，可以看到刚才的配置信息

 

检查一下镜像站行不行命令1

npm config get registry

 

检查一下镜像站行不行命令2

Npm info vue 看看能否获得vue的信息

 

更新NPM

注意，此时，默认的模块D:\nodejs\node_modules 目录

将会改变为D:\nodejs\node_global\node_modules 目录，

如果直接运行npm install等命令会报错的。

我们需要做1件事情：

1、增加环境变量NODE_PATH 内容是：D:\nodejs\node_global\node_modules

 

（注意，一下操作需要重新打开CMD让上面的环境变量生效）

 

测试NPM安装vue.js

命令：npm install vue -g

这里的-g是指安装到global全局目录去

 

测试NPM安装vue-router

命令：npm install vue-router -g

 

测试NPM安装 vue-cli  vue脚手架

运行npm install vue-cli -g安装vue脚手架

 

编辑环境编辑path

对path环境变量添加D:\nodejs\node_global

win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】

 

重新打开CMD，并且测试vue是否使用正常

注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，

他的配置并不全放在根目录下的 webpack.config.js 中。

 

用脚手架生成第一个vue项目

进入D盘，直接在根目录生成第一个vue项目

1、输入 vue init webpack vue01

说明：

Project name (vuetest)

项目名称，可以自己指定，也可直接回车，按照括号中默认名字。

Project description (A Vue.js project)

项目描述，也可直接点击回车，使用默认名字。

Author

作者，可以自己指定，也可直接回车。

接下来会让用户选择

Runtime + Compiler: recommended for most users

运行加编译，既然已经说了推荐，就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere

仅运行时，已经有推荐了就选择第一个了

Install vue-router? (Y/n)

是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。

Use ESLint to lint your code? (Y/n)

用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行。

Setup unit tests with Karma + Mocha? (Y/n)

是否安装单元测试。

Setup e2e tests with Nightwatch(Y/n)?

是否安装e2e测试

 

初始化，安装依赖

2、运行 npm install 安装依赖

3、运行 npm run dev 运行项目

成功界面，提示打开地址http://localhost:8080

 

自动打开浏览器http://localhost:8080/#/

 

4、运行 npm run build 生成静态文件

打开dist文件夹下新生成的index.html文件

 

nmp下新建出来的vue01的目录描述：

目录文件介绍： 
bulid 
里面是一些操作文件，使用npm run * 时其实执行的就是这里的文件。 
config 
配置文件，执行文件需要的配置信息。 
src 
资源文件，所有的组件以及所用的图片都是在这个文件夹下放着。简单看一下这个文件夹下都放了哪些东西。 
assets 
资源文件夹，放图片之类的资源， 
components 
组件文件夹，写的所有组件都放在这个文件夹下， 
router 
路由文件夹，这个决定了页面的跳转规则， 
App.vue 
应用组件，所有自己写的组件，都是在这个组件之上运行了。 
main.js 
webpack入口文件。
---------------------