最详细的vue安装教程

vue.js使用(前后端分离)

1：安装node.js 环境

（1）下载对应你系统的Node.js版本:https://nodejs.org/en/download/

（2）安装

 

安装完成后验证node.js 是否安装成功

查看node 版本，以及npm 若展示下图，则说明自带npm也安装成功

注:npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

（3）环境变量

这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

举例：

若要把全局模块所在路径及缓存路径切换到上图位置，则需执行如下命令：

npm config set prefix "D:\vueTemp\node\node_global"

npm config set cache "D:\vueTemp\node\node_cache"

查看npm的本地仓库:npm list -global

接下来配置环境变量

系统变量：

变量值：D:\vueTemp\node\node_global\node_modules

用户变量：

C:\Users\admin\AppData\Roaming\npm 修改为

D:\vueTemp\node\node_global

配置完成后，安装个module测试下 执行

npm install express -g  （-g是全局安装）

已生成

2：安装淘宝镜像(cnpm)

注:npm 是 国外的服务器，所以出现下载慢或者出现异常

    cnpm则是淘宝团队做的npm的镜像，解决上述问题，目前10分钟更新一次

保证与官服同步。其操作方式用 npm一致。

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

安装成功后 运行 cnpm -v 命令

则安装成功

3：安装全局vue

执行命令:npm install -g vue

全局vue 安装成功

4：安装 vue脚手架

命令:cnpm install @vue/cli -g(最新版本)

//cnpm install vue-cli -g(不是最新版本)

至此环境已搭建好

然后安装Visual Studio Code 软件

所需插件则选择如下图所示

接下来创建项目：

1、选择文件夹（新建项目位置）

2、进入控制台 输入 vue ui命令(最新脚手架支持)

3、进入项目管理器 选择创建 选择项目位置（即刚才选中的文件夹），点击创建

4、创建项目

 

启动成功后点击启动app 进入项目主页面

下图为vscode 所对应的项目代码

从请求到页面渲染顺序 以index.html 主页面为例

首先请求到main.js 文件

main.js 引入各个组件,

即解析

router.js 路由器中又引入相应组件

所以 App.vue 可根据 router-link 根据name匹配进行跳转

最后渲染 index.html 中的id为app div 这就是一个完整的请求顺序

http://test.vrm.sohu-inc.com//dist/index.html#/