vue-cli

最新推荐文章于 2024-07-09 21:18:14 发布

LL读书人

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量264

点赞数

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

本文链接：https://blog.csdn.net/jianggeye7485/article/details/119937742

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

一、概念

vue-cli（vue脚手架）是vue官方提供的、快速生成vue工程化项目的工具。
特点：
① 开箱即用
② 基于webpack
③ 功能丰富且易于扩展
④ 支持创建vue2和vue3项目
安装：
npm install -g @vue/cli
或
yarn global add @vue/cli
检查安装：
vue --version
1、使用cmd
在这里插入图片描述
2、使用powershell
默认使用vue --version命令出现错误
vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅
https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置行:1 字符: 1

解决方法：
Ⅰ、以管理员身份允许PowerShell
Ⅱ、执行set-ExecutionPolicy RemoteSigned 命令
Ⅲ、输入字符 Y ，回车
在这里插入图片描述

创建一个项目：
vue create my-project
或
vue ui

二、创建项目

由两种方式：
基于命令行方式创建vue项目
vue create my-project
或
基于可视化面板创建vue项目
vue ui

①基于vue ui命令创建vue项目
步骤一：在终端允许vue ui命令，会自动在浏览器中打开创建项目的可视化面板：
步骤二：在详情页面填写项目名称
步骤三：在预设页面选择手动配置项目
步骤四：在功能页面勾选需要安装的功能
Choose Vue Version （手动版本控制）
Babel （转换js高级语法）
CSS预处理器（可使用less语法美化页面）
使用配置文件（自定义配置插件配置信息）
步骤五：在配置页面勾选vue的版本和需要的预处理器
步骤六：把刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置
步骤七：创建项目并自动安装依赖包

②基于命令行创建vue项目
步骤一：在终端下运行vue create 项目名命令，基于交互式的命令创建vue的项目：
步骤二：选择要安装的功能（空格切换选中状态，a全选，i反选）
步骤三：使用上下箭头选择vue版本，使用回车确认
步骤四：使用山下箭头选择要使用的css预处理器。
步骤五：使用上下箭头选择如何存储插件的配置信息。
In dedicated config files 把babel，ESLint等插件的配置信息存储到单独的配置文件中。（推荐）
In package.json 把babel，ESLint等插件的配置信息存储到package.json 文件中。（不推荐）
步骤六：是否把配置保存为预设。
步骤七：选择使用安装项目的依赖包。
npm run server 运行项目

三、vue组件库

在实际开发中，可以把自己封装的.vue组件整理、打包并发布为npm的包，从而供其他人下载和使用，这种可以直接下载并在项目中使用的现成组件，就叫做vue组件库。
vue组件库和bootstrap的区别：
bootstrap只提供了纯粹的原材料（css，html，js特效），需要开发者做进一步的组装和改造。
vue组件库时遵循vue语法、高度定制的现成组件，开箱即用。
最常用的vue组件库
①pc端
ElementUI
ViewUI
②移动端
Mint UI
Vant

四、ElementUI

1、介绍
VUE3使用elementPlus:https://element-plus.gitee.io/#/zh-CN
安装elementPlus：
$ npm install element-plus --save
$ yarn add element-plus

2、引入elementPlus。
完整引入：在main.js中

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

按需引入：
①在App.vue组件中引入

<script>
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'

export default defineComponent({
  name: 'app'
  components: {
    ElButton,
  },
})
</script>

②样式的引入
通过js方式引入

import 'element-plus/dist/index.css'

通过HTML的头文件引入

<head>
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
</head>

五、把组件的导入和注册封装为独立的模块

在src目录下新建element-ui/index.js模块。

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'

const app = new Vue({
  render: h => h(App),
  router,
})

app.$mount('#app')

六、axios拦截器

会在每次发起ajax请求和得到响应的时候自动被触发。
在这里插入图片描述
应用场景：
①Token身份认证
②Loding效果
③etc…

配置请求拦截器：
通过 axios.interceptors.request.use(成功的回调，失败的回调)配置请求拦截器。

axios.interceptors.request.use(function(config) {
	return config;
}, funciton (error{
	return Promise.reject(error);
})

注：失败的回调函数可以被省略

1、用请求拦截器实现Token认证

import axios form 'axios'

axios.defaults.baseUrl = 'http://www.escook.cn'
//配置请求拦截器
axios.interceptors.request.use(config => {
	//为当前请求配置Token认证字段
	config.headers.Authorization = 'Bearer xxx'
	return config;
})

Vue.prototype.$http = axios

2、用请求拦截器实现展示Loading效果

//按需导入Loading效果组件
import { Loding } from 'element-ui'
//声明变量，用来储存loading组件的实例对象
let loadingInstance = null

//配置请求拦截器
axios.interceptors.request.use(config => {
	//使用loading组件的service方法，创建loading组件的实例，并全屏展示loading效果
  loadingInstance = Loding.serice({ fullscreen: true })
  return config
})

配置响应拦截器结束Loading效果
axios.interceptors.response.use(成功的回调,失败的回调)
注：失败的回调可以被省略
利用Loading实例提供的close()方法即可关闭Loding效果

//配置响应拦截器
axios.interceptors.response.use(response => {
  //调用Loading实例的close方法即可关闭loading效果
  loadingInstance.close()
  return response
})

七、proxy跨域代理

vue项目运行的地址: http://localhost:8080/
API接口运行的地址: http://www.escook.cn/api/users
由于当前API接口没有开启CORS跨域共享资源，默认情况，上面的接口是无法请求成功的！
1、通过代理解决接口的跨域问题。
通过vue-cli创建项目在遇到接口跨域问题时，可以通过代理的方式来解决：
①把axios的请求根路径设置为vue项目的运行地址(接口请求不在跨域)
②vue项目自发请求的接口不存在，把请求转交给proxy代理
③代理把请求根路径代替为devServer.proxy属性的值，发起真正的数据请求
④代理把请求到的数据，转发给axios
步骤一：在main.js入口文件中，把axios的请求根路径改为当前web项目的根路径：
//原来的
axios.defaults.baseURL = ‘http://www.escook.cn’
//改为项目的端口
axios.defaults.baseURL = ‘http://localhost:8080/n’
步骤二：在项目的根路径下创建vue.config.js的配置文件，并声明如下的配置(配置完应重启服务器生效)：

module.exports = {
	devServer: {
		proxy: 'http://www.escook.cn',
	},
}

注：项目上线发布时，需要API接口服务器开启CORS跨资源共享。

LL读书人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-cli

一、概念vue-cli（vue脚手架）是vue官方提供的、快速生成vue工程化项目的工具。特点：① 开箱即用② 基于webpack③ 功能丰富且易于扩展④ 支持创建vue2和vue3项目安装：npm install -g @vue/cli或yarn global add @vue/cli检查安装：vue --version1、使用cmd2、使用powershell默认使用vue --version命令出现错误vue : 无法加载文件 C:\Users\Adminis
复制链接

扫一扫