vue-cli脚手架快速搭建项目指南
vue-cli脚手架
1.学习本章前请先下载node.js
链接:
https://pan.baidu.com/s/1_FLpv-uPGrsakjGd4S-KQQ?pwd=kt9e
提取码:kt9e
一、脚手架简介
Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程
1. webpack
前端项目工程化的标志之一就是引入了『编译』环节,而 webpack 就是最常见、最常用的前端项目编译工具。
如果作类比的话,那么 npm + webpack ≈ maven
2、脚手架介绍
a、安装vue-cli4
- 删除已安装的 vue-cli
npm uninstall -g @vue/cli
- 先安装淘宝镜
npm config set registry https://registry.npm.taobao.org
安装cli
npm install -g @vue/cli
安装结束后,你可以通过 vue --version 或 vue -V 查看 vue-cli 的版本信息
b、配置vue环境变量
把这个路径配到path里
3、创建vue-cli4项目
3.1、第一步
使用如下命令开始创建 vue 项目
vue create 项目名
你会看到如下内容:
第一项和第二项(
default ...
)表示的是使用默认配置创建 vue 项目。第三项(
Manually ...
)表示手动对 vue 项目的各方面进行设置
3.2、第二步
在上一步选中第二项后,你会看到如下界面:
对于每一项的功能,此处做个简单描述:
Babel:支持使用 babel 做转义。
TypeScript:支持使用 TypeScript 书写源码。
Progressive Web App (PWA) Support PWA:支持。
Router:支持 vue-router。
Vuex:支持 vuex。
CSS Pre-processors:支持 CSS 预处理器。
Linter / Formatter:支持代码风格检查和格式化。
Unit Testing:支持单元测试。
E2E Testing: 支持 E2E 测试。
3.3、第三步
选择vue版本为2,不要选3,不要选3
3.4、第四步
如果在功能选择界面中选中了 Router,那么我们接下来会看到如下界面(如果功能界面没有选择 Router,就会跳过这个界面):
在这个界面中,vue-cli 在询问你,对于 Router 你是否以它的 history 模式使用它?默认值是 Yes
。
如果不使用 Router 的 history 模式,那自然就是 hash 模式。这里我们输入 n
,表示使用 Router 的 hash 模式。
3.5、第五步
在设置完你所要使用的各个功能的设置之后(例如,上面的 Router 的 history / hash 模式的设置), 我们会看到下面界面:
在这个界面中,vue-cli 是在询问你:是将所有的配置都放在 pacakge.json 一个文件中,还是将各个功能的配置分开存放在独立的文件中?
选择第一项:分开存放。
3.6、第六步
这是 vue-cli 创建 vue 项目的最后一个界面:
在这里,vue-cli 是在询问你:是否将你的这些设置保留下来作为默认的项目设置的模板。默认值是 N
。
我们输入 N
,或者直接按回车确认进入安装界面:
3.7、第七步
在控制台中输入:npm run serve 启动项目
三、项目结构说明
1、项目结构
项目目录说明:
# | 说明 |
---|---|
node_modules 目录 | 项目所依赖的包的存放目录(封装webpack 依赖包) |
public 目录 | 存放项目所需的静态资源文件目录 |
src 目录 | 存放项目的源码文件的目录 |
babel.config.js 文件 | babel 配置文件 |
package.json 文件 | 整个项目的配置文件 |
src/main.js 文件 | 整个项目的入口文件,并且在这里引入全局使用的 .vue、.css 文件 |
2、src目录说明
assets 静态资源 (css、 js 、 image 、字体图标)
views 放置组件页面
components 放置组件页面中嵌套的组件
App.vue 根组件 => 指定路由出口
- 脚手架之后,所有的组件都将渲染到 app.vue 中
app 中的 #app 还是 index.html 中的 #app, app.vue 中的会覆盖前者,可以通过分别添加 title 属性验证一下
路由出口要写在 app.vue 组件模板中
main.js
入口 js 文件
作用 : 创建 vue 实例,导入其他组件并挂在到 vue 实例上
Vue.config.productionTip = false
不要打印提示检测 no new : 见后面的检测警告
new Vue({el: '#app', // 目标显示router, // 挂载路由components: { App }, // 注册组件 Apptemplate: '<App/>' // 模板显示组件 app })
3、单文件组件
在 vue-cli 创建的 vue 项目中,我们看到有一类后缀名为 .vue 的文件,我们称为『单文件组件』。
单文件组件的组成结构分三部分:
- template 组件的模板区域
- script 业务逻辑区域
- style 样式区域
例如:
<template><!-- 这里用于定义 Vue 组件的模板内容 -->
</template><script>// 这里用于定义 Vue 组件的业务逻辑export default {data(){return { // 私有数据} }, methods: {} // 处理函数,created(){}
}
</script><style scoped>/* 这里用于定义组件的样式 */
</style>
4、vue.config.js 文件
默认情况下通过 serve
命令运行项目会占用 8080
端口,在 vue.config.js
的文件加入如下配置修改端口号:
module.exports = {devServer: {port: 8888}
}
四、安装axios包
1、安装axios
安装方式
使用 npm 命令安装
npm install axios
2、vue-cli 中main.js引入并使用 axios
import axios from 'axios'
Vue.prototype.$axios = axios
五、VUE-CLI解决跨域问题
vue-cli 解决开发过程中的跨域问题是利用到了 webpack 在开发环境中所提供的代理服务器(http-proxy-middleware)。
前端的 ajax 请求并不是直接发给后台服务器,而是发给了代理服务器,再由代理服务器转发给后台服务器;返回数据的时候,同样也是由代理服务器接收到后台服务器的返回,然后代理服务器再将返回结果转发给前端。
在vue-cli项目的根目录vue.config.js,添加如下代码
module.exports = {transpileDependencies: true,devServer: {port: 8888, //vue项目访问端口proxy: {"/api": { // 1target: 'http://127.0.0.1:8080', // 2changeOrigin: true, // 3pathRewrite: {'^/api': '/' // 4}}}}}
配置说明
1、所有以 /api 开头的请求都要求代理服务器进行转发。 2、要求代理服务器(vue 的 http-proxy-middleware)将我们发给它的请求转发到 xxx 地址,即,真实的后台服务器的根路径。这里需要注意的一点是,这里必须加上 http:// 前缀。 3、是否是跨域请求?这基本上肯定是废话,不跨域就没有必要配置这个 proxy 了。 4、代理服务器转发时是否需要改写 URI,以及如何改写。
te: {
‘^/api’: ‘/’ // 4
}
}
}
}
}
- 配置说明```txt1、所有以 /api 开头的请求都要求代理服务器进行转发。2、要求代理服务器(vue 的 http-proxy-middleware)将我们发给它的请求转发到 xxx 地址,即,真实的后台服务器的根路径。这里需要注意的一点是,这里必须加上 http:// 前缀。3、是否是跨域请求?这基本上肯定是废话,不跨域就没有必要配置这个 proxy 了。4、代理服务器转发时是否需要改写 URI,以及如何改写。
六、感谢看完 有不清楚的可以评论区沟通
vue-cli脚手架快速搭建项目指南相关推荐
- 猿创征文|【Vue五分钟】 Vue Cli脚手架创建一个项目
目录 前言 一.创建项目的操作步骤 选择路由模式 选择CSS预编译器 选择如何存放配置 自动下载项目所需的包文件 二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面 三.项目的 ...
- vue Cli 脚手架的搭建
1.安装 node.js 应用 安装完之后测试是否安装成功,如图: 2.全局安装 vue - cli 输入命令符: npm install --global vue-cli 测试是否安装成功,成功如 ...
- 1. Vue CLI脚手架
1.1 介绍 Vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板,是Vue官方提供的标准化开发工 ...
- Vue2.x 核心基础(Vue概述,Vue基本使用,@vue/cli脚手架,Element-UI 的基本使用,Vue模板语法)
1. Vue概述 尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
- Vue 全家桶之 vue cli (脚手架)
一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口 命令 ...
- Vue之脚手架第一个项目
安装参考下面网址:vuecli的官网 https://cli.vuejs.org/zh/guide/installation.html 安装完之后,输入命令: vue init <templat ...
- JavaEE企业级快速开发平台jeesite4的使用和快速搭建项目
场景 JeeSIte是一个JavaEE企业级快速开发平台,基于经典技术组合(SpringBoot.Apache Shiro .MyBatis.Beetl.Bootstrap)在线代码生成工具,支持Sp ...
- 【入门】React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」
往期文章目录: [入门]React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」 文章目录 快速搭建项目 介绍 Vite Vite 特点 搭建第一个 Vite 项目 ...
- 如何查看vue版本号以及vue/cli脚手架版本号
查看vue版本号 方法一:直接在项目的package.json文件,找到dependencies就能看到了 方法二:输入命令npm ls vue (或者npm list vue) 查看vue/cli脚 ...
最新文章
- 那些不能错过的Xcode插件
- java super extends_Java继承extends与super关键字
- android 代码混淆示例
- php jsonp实例 mip无限滚动组件接口注意事项
- CTF-i春秋网鼎杯第一场misc部分writeup
- arcgis飞行轨迹动画_高德地图,百度地图,arcgis地图利用canvas动画绘制圆形扩散、运动轨迹等动态效果...
- iextensionunit类_Java ICompilationUnit.reconcile方法代码示例
- 极性大小判断技巧_“赫洛克效应”:夸奖能激发孩子的潜能,但父母要掌握技巧与原则...
- effective java ---读书笔记一
- SAP CRM中间件Object出现wait状态的原因调试
- 方根法公式_仓储管理笔记之库存分析法:ABC分析法、区域合并法......
- Sentinel(二十六)之Sentinel Dashboard中修改规则同步到Nacos
- 让vs2008支持jQuery的智能提示!
- cmake 添加二进制文件_CMake构建系统
- python带参数的装饰器的作用_Python带参数的装饰器运行原理解析
- 钣金cad插件_ug,CAD,SolidWorks,钣金??????非标等设计
- CTR 预估模型简介--非深度学习篇
- python与abaqus的关系_python和abaqus交互
- 方波峰峰值和有效值_峰峰值,峰值,平均值,有效值的关系.pdf
- STM32 学习十 Flash下载与调试