vue的安装和基本配置

qiuzi_1111

已于 2023-12-29 15:33:59 修改

阅读量1.9k

点赞数 52

分类专栏： vue.js 文章标签： vue.js 前端 javascript 前端框架

于 2023-12-29 15:22:22 首次发布

本文链接：https://blog.csdn.net/qiuzi_1111/article/details/135277311

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

（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 命令之后，可看到如下所示界面

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

此界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，每个配置项的作用如下表所示：

配置项	说明
Babel	JavaScript语法编译器
TypeScript	TypeScript是JavaScript的超集，其包含了并扩展了JavaScript的语法，需要被编译输出为JavaScript才能在浏览器运行
Progressive Web App (PWA) Support	渐进式Web应用程序
Router	vue-router（vue路由）
Vuex	vue的状态管理模式
CSS Pre-processors	CSS预处理器，如less或sass
Linter/Formatter	代码风格检查和格式化（如：ESlint）
Unit Testing	单元测试（unit tests）
E2E Testing	端对端测试

大家根据需求选择相应的配置项，一步步往后创建项目即可。项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：

cd helloword

npm run serve

接下来，在浏览器输入：http://localhost:8080/ 地址，即可看到如下页面

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

常用的构造选项

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

用法

?( , ) ：监听什么名字就是什么（新的值，旧的值）

六、路由传参及获取参数

使用路由传递参数：

在详情页接收路由参数：

七、axios的使用

（1）、安装

在项目的根目录，打开终端，输入以下命令行安装Axios

npm install(或简写为 i) axios

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

第一种方法：

或者进行post接口的请求：

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

报错如下：

Access to XMLHttpRequest at ' http:/ /apis...juhe.cn/goodbook/ catalogkey=ee3df...&dty.pe=json' from origin ' http://lo :8080/#/ :lcalhost:8080' has been blocked by CORS policy: No‘ Access-Control- Allow-Origin' header is present on the requested resource .

1.在vue.config.js里写的代码，如果没有自行创建

module.exports = {
devServer: {
proxy: {
'/api': {
// 这里是后台提供给我们的接口地址
target: 'http://apis.juhe.cn/goodbook',
ws:true,
changeOrigin: true, //允许跨域
open:true,
pathRewrite:{

/* 当我们在浏览器看到的请求地址为：http://localhost:8080/api/User/GetAllUsers */

/* 实际上我们访问的地址为：http://localhost:5000/User/GetAllUsers 因为重写了/api */

/* 如果后台提供的接口本身就带有api，则无需执行重写路径这个步骤例如:http://localhost:5000/api/User/GetAllUsers */

'^/api':'/' //重写路径

}

}

}

}

}

2.main.js的添加如下代码：

// 引入axios
import axios from 'axios'
axios.defaults.baseURL = '/api'
// 把axios挂载到vue上。 $http为引用名，可根据个人需求自定义
Vue.prototype.$http = axios

3.访问接口时的代码（根据实际情况修改）

created() {

this.$http({

method: "get",

url: "/catalog?key=你自己的key或token",

}).then((res) => {

this.list=res.data.result;

console.log(this.list);

});

}

七、vue的总结

响应式数据绑定：Vue.js 使用数据劫持和发布订阅模式来实现响应式数据绑定。当数据发生变化时，视图会自动更新。
组件化开发：Vue.js 采用组件化的开发方式，使代码更加模块化和可重用。组件可以包含模板、脚本和样式，并且可以在应用程序中的任何位置使用。
模板语法：Vue.js 提供简洁的模板语法，用于渲染组件和页面。可以使用双花括号插值、条件渲染、列表渲染等模板指令。
路由管理：Vue Router 是 Vue.js 的官方路由管理器，用于构建单页应用程序的路由功能。通过配置路由，可以轻松实现页面之间的切换和数据传递。
状态管理：Vue.js 可以与状态管理库（如 Vuex）结合使用，以实现复杂应用程序的状态管理。Vuex 可以帮助您组织和管理应用程序的状态，并确保状态的一致性和可预测性。
插件化架构：Vue.js 允许使用插件来扩展其功能，例如添加全局组件、混入、过滤器等。这使得 Vue.js 具有高度可定制性，可以根据项目的需求轻松扩展其功能。
社区支持：Vue.js 拥有庞大的社区支持和活跃的开发者社区。这意味着您可以在遇到问题时找到丰富的资源和解决方案，并且可以与其他开发者交流和分享经验。
与其他库或框架集成：Vue.js 可以与其他库或框架（如 React、Angular 等）集成，以实现特定的功能或与现有的项目集成。这种灵活性使得 Vue.js 成为一种通用的前端框架，适用于各种项目和团队。

总之，Vue.js 是一个功能强大、灵活且易于学习的前端框架，适用于构建各种规模的应用程序。通过掌握其核心概念和最佳实践，您可以利用 Vue.js 构建出高效、可维护和用户友好的界面。