vue的安装和基本配置

目录

一、前言

二、vue脚手架项目环境配置

三、使用VueCli快速构建项目

卸载命令如下：

vue cli 脚手架的安装

四、创建vue项目

执行 vue create 命令之后，可看到如下所示界面

​编辑

五、vue实例常用到的构造选项

六、路由传参及获取参数

使用路由传递参数：

在详情页接收路由参数：

七、axios的使用

（1）、安装

（2）、安装好axios之后，哪些页面需要进行接口数据的调用，就可以在此页面引入axios依赖包。

第一种方法：

第二种方法：也可以防止跨域

七、vue的总结

---

一、前言

        本博文将介绍 Vue.is 有关的一些概念和技术，并帮助读者了解它们背后的工作原理，同时构建第一个 Vue.is 应用。

1.vue的安装和基本配置

二、vue脚手架项目环境配置

        直接去官方下载：下载 | Node.js 中文网 (nodejs.cn)

        先查看自己是否已经安装了，下图就是已经安装好了的，每个人的版本号可能不同，没关系

​

1、概述：npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题，只要电脑成功安装了node，npm也会自动安装在电脑上。

使用命令行查看npm是否安装成功，下图就是已经安装好了的，每个人的版本号可能不同，没关系

​

三、使用VueCli快速构建项目

        Vue CLI从3版本开始，包的名称由vue-cli 改成了vue/cli,如果您已经安装了vue-cli(1.x或者2.x),需要先卸载，再重新全局安装vue/cli。

卸载命令如下：

//  注意，第一次使用vue脚手架可直接忽略此步骤

           npm uninstall vue-cli -g

vue cli 脚手架的安装

//  通过npm全局安装@vue/cli脚手架  @3.10表示下载某个指定版本，如果不写，则下载最新版本

           npm install -g @vue/cli

          

           PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

          //安装淘宝镜像的命令行

          ①  npm install -g cnpm --registry=https://registry.npmmirror.com

          // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

          ②  cnpm install -g @vue/cli

        

         //PS：如需要卸载vue/cli包，可执行以下命令行

         npm uninstall -g @vue/cli

注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：

npm config set registry https://registry.npm.taobao.org

或者，哪个方式快，用哪个

npm config set registry https://registry.npmmirror.com

成功界面：

四、创建vue项目

// helloworld 是项目名，可自行定义          

vue create helloworld

执行 vue create 命令之后，可看到如下所示界面