最详细的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#/

最详细的vue安装教程相关推荐

全网最详细的Neo4j安装教程
全网最详细的Neo4j安装教程一.前言 Neo4j是一个高性能的NOSQL图形数据库,它将结构化数据存储在网络上而不是表中.它是一个嵌入式的.基于磁盘的.具备完全的事务特性的Java持久化引擎,但是 ...
最详细的Hadoop安装教程
最详细的Hadoop安装教程前言 Hadoop 在大数据技术体系中的地位至关重要,Hadoop 是大数据技术的基础,对Hadoop基础知识的掌握的扎实程度,会决定在大数据技术道路上走多远. 这是一篇 ...
夏普复印机最最最详细的驱动安装教程
虽然本教程是以夏普举例,但是所有打印机驱动安装方法都大同小异,网络打印机通过IP地址传输数据,USB打印机通过USB连接线传输数据,无非就是端口设置上和驱动文件上有区别,其它型号安装时也可以参考一下本 ...
超级详细的 Redis 安装教程
超级详细的 Redis 安装教程 Windows 版本的 Redis 是 Microsoft 的开源部门提供的 Redis. 这个版本的 Redis 适合开发人员学习使用,生产环境中使用 Linux ...
最详细的Python安装教程
最详细的Python安装教程一.进入Python官网首页,下载最新的Python版本 https://www.python.org/downloads/ 选择最新的Python3.10.5,下载64 ...
超级详细的Vue安装与配置教程
Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下 − 目录一. ...
npm vue安装教程
npm安装教程已经填坑,分享给新手. npm安装教程 https://blog.csdn.net/qq451354/article/details/65021307?locationNum=14&a ...
可能是全网最详细的python安装教程（windows）,小白建议收藏
Python是当下流行的通用编程语言,简单易学.容易上手,且"钱"景广阔. 在网络爬虫.数据挖掘分析.人工智能.运营运维.日常工作效率提升,无不有Python的影子. 因此,今天跟 ...
家用服务器虚拟机装hadoop,超详细hadoop虚拟机安装教程（附图文步骤）
前两天看到有人留言问在什么情况下需要部署hadoop,我给的回答也很简单,就是在需要处理海量数据的时候才需要考虑部署hadoop.关于这个问题在很早之前的一篇分享文档也有说到这个问题,数据量少的完全发 ...
Postman入门教程之详细下载及安装教程
postman,一个接口测试或调试工具,具体的详细介绍,请参考文章: https://mp.weixin.qq.com/s/h27Z_XY0bfcRHVjasqEXRA (题外话,对英语不熟练的同学, ...

最详细的vue安装教程

最详细的vue安装教程相关推荐

最新文章

热门文章