Vue脚手架安装流程详解

这次写的是关于vue框架开发的一些流程，如有错误，请大佬们指正！在此表示感谢！

1.安装

cnpm/npm i @vue/cli -g 这里cnpm是指用淘宝源，因为下载速度更快下载vue的脚手架

2.创建项目

vue create 项目名称在终端创建项目
选择（可以根据自己的码代码的风格选用大部分人会带上eslint代码规范工具）
优雅降级
css预处理器
ts
vue版本

3.启动项目

启动项目 yarn serve / npm run serve (这里我要说yarn和npm都是包管理工具，但是yarn是最新的，经过重新设计的npm客户端，它的下载和安装速度比npm快了一点点，当然要先下载cnpm/npm i yarn -g)
yarn和npm主要区别
1.yarn不需要互联网连接就能安装本地缓存的依赖项，提供了离线模式，npm没有
2.yarn更加简洁，能更加直观打印重要的信息，还有语义清晰

4.使用项目

1.组件导入
import Hello from ‘相对路径’
通过components注册
2.style
- css
  less
  scss
  stylus
  “scoped规定样式作用范围的”
  ps：三种都是当下主流，小公司更喜欢使用less因为安装简单，使用简单，大公司使用scss和stylus，本人公司大多数情况下使用的是scss，scss其实也挺不错的，结构也容易懂。但stylus更好一些，因为它是集所有css scss sass less优点集一身的，所以我打算业余的时候要多用它，熟悉一下。加油！
3.解决数据请求跨域问题（这个问题涉及优点广，作者挑实用的讲）
1.在vue.config.js/devServer/proxy配置
```
devServer{
proxy: {'/ajax': {target: '目标网址'，changeOrigin: true   }
}
```

}
上是统一域名的情况下
不统一域名用下面
2.devServer{
proxy: {
‘/api’: {
target: ‘目标网址’，
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}
}

5.各个文件取名以及作用

src/pages | src/views | src/routes 展示页面
- src/utils 公共函数封装库
- src/interface ts定义的类型
- src/router 路由 — 页面跳转
- src/store 数据存储和管理的目录
- src/components 公共组件
- src/assets 静态资源文件夹
- fonts 字体包
- img 静态图片

6.进行移动端配置

移动端兼容：添加meta标签

       - [参考文档](https://blog.csdn.net/yc123h/article/details/51356143)- 移动端禁用： 双指缩放
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />- 移动端自适应- 方案- 手动计算rem- flex + rem - 设计稿--> px ---- 移动端的rem -  插件 px2rem  好用- http://www.dsiab.com/1601850633375- 去除浏览器默认样式- assets/style/reset.scss - 在 app.vue/style中引入reset.scss

以上就是今日的分享了，望各位前端兄弟们加油呀~

Vue脚手架安装流程详解相关推荐

《MySQL安装流程详解》及《MySQL安装一直失败，重新安装显示已安装》
<MySQL安装流程详解>及<MySQL安装一直失败,重新安装显示已安装> 本文由博主经过查阅网上资料整理总结后编写,如存在错误或不恰当之处请留言以便更正,内容仅供大家参考学习 ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
PMS启动 APK 安装流程详解
文章目录概述相关类说明 PMS 服务启动应用程序(APK)安装有界面安装无界面安装 APK 安装原理概述 PackageManagerService(以下简称 PMS)是一个常用的系统服务 ...
工业以太网交换机的安装流程详解
工业以太网交换机是应用于工业控制领域的以太网交换机设备,所以设备的安装调试是很重要的一环,那么,我们在安装工业交换机的过程中需要注意什么呢?工业以太网交换机的安装流程是什么呢?接下来我们就跟随飞畅科技 ...
IDEA社区版下载安装流程详解
本人一直使用的是Eclipse作为开发工具的,不过现在IDEA非常的受推崇,所以决定上手试一试.网上有很多旗舰版的文章,我没有仔细看,我这次是决定使用社区版的IDEA,虽然功能会少一些,作为练手用完全 ...
Android App启动流程详解
前言:在之前的文章中已经写了apk的打包流程.安装流程,今天就是梳理一下apk系列的最后的流程--app启动流程.经过今天的梳理以后咱们就可以对apk包是怎么编译生成的.apk是怎么被安装到安卓手机的 ...
win10安装SQLserver2017详解
详解一波关于win10系统下SQL server 2017的安装完整流程以及安装过程中遇到的一小部分问题的解决方法 iso镜像文件:https://pan.baidu.com/s/1hMFiPpI0j ...
思科考试注册流程详解----VUE考点现场演示-晁海江-专题视频课程
思科考试注册流程详解----VUE考点现场演示-5201人已学习课程介绍更多课程,请百度搜索"晁海江". 备注:注册过程中,使用的姓名.电话.思科ID等,均是临 ...
VueCli脚手架的使用详解
VueCli脚手架的使用详解介绍 VueCLI 脚手架,可以把许多项目通用的依赖包(vue.webpack.路由.vuex.less编译器等等) 和通用的配置都给安装配置好,使得开发者可以把全部的 ...
苹果app开发流程详解
苹果App Store上传应用流程详解,在向AppStore提交应用之前,开发者首先要成为苹果iOS开发者项目的成员,每年向苹果缴纳99美元或199美元的费用(具体申请方法后期更新). 免688开发 ...

Vue脚手架安装流程详解

这次写的是关于vue框架开发的一些流程，如有错误，请大佬们指正！在此表示感谢！

1.安装

2.创建项目

3.启动项目

4.使用项目

5.各个文件取名以及作用

6.进行移动端配置

以上就是今日的分享了，望各位前端兄弟们加油呀~

Vue脚手架安装流程详解相关推荐

最新文章

热门文章