脚本宝典收集整理的这篇文章主要介绍了vue项目实践1——构建项目,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文是一篇实践文,详细记录移动端vue项目构建全过程,其中包括webpack、vue-router、axios、eslint、scss等的相关配置。
github地址:https://github.com/sunhuili/v...
这里用的node是8.9.3版本,之前8.1的版本会有点问题,建议升级到最新可用版本。cnpm跟npm功能一样,npm装不了的包,可以用cnpm。
npm install vue-cli -g
vue init webpack xxx
(xxx为项目名)npm install
),安装时间有点久,耐心等待……f>出现如下图就安装好了,到项目文件夹下npm run dev
,打开浏览器输入对应路由就可以看到自己的网站了。
cnpm install --save-dev eslint eslint-plugin-vue
,传送门
关于自定义规则
在刚刚引用eslint-plugin-vue的文件中有个rules,在这里就可以添加我们自定义的规范。具体的规范设置:eslint中文。
cnpm install --save-dev node-sass
、sass-loadercnpm install --save-dev sass-loader
。cnpm install
(因为包的安装顺序会有影响,所以先把需要的包保存到package.json,然后让他自动安装一遍)
cnpm install --save vuex
a> strict严格模式,有利于代码规范和数据管理
b> modules可以加入子模块,建议尽量把数据存在子模块中,主入口保持干净,只做配置用。子模块的配置统一在‘文件层级’一节中将,这里只做初步配置。
cnpm install --save 'axios'
a>全局配置包括请求时长限制、后端接口处理文件路径、请求头配置等
b>请求拦截:发请求前进行一些处理
若请求配置成功,则对post请求参数做序列化处理,然后发请求
若请求配置不成功,则不发请求
c>响应拦截:接收后端响应前进行一些处理
若成功,则表示限定时间内收到了后端响应,即“响应成功”,返回resolve(response.data)。
若失败,则表示限定时间内没有收到后端响应,即“响应失败”,返回reject(error)。
d>针对响应成功,还有请求成功和请求失败之分,这个由前后端约定执行,在api的配置中实现,这里只配置axios相关。
至此,构建项目的相关配置和依赖包已基本安装配置完毕,其他的配置按需自取。接下来开始搭建项目,使用当前配置进行移动端web开发
首先先看一下当前的目录结构和package.json(只截取依赖包部分,部分构建项目时自动安装的依赖包没有截取到),因为接下来将在现有配置的基础上开发移动端项目,重点在于文件层级结构的搭建。
a>_reset.scss为移动端样式(网上直接可以搜到),在App.vue中引入该文件;
b>在index.html中配置好各种移动端meta属性,然后设置html、body、#app高为100%;
c>main.js中引入移动端flexible布局,可以以iphone为基准:375的宽度1rem=20px。
d>_variable.scss为全局样式参数配置,如主题色$theme-color-black: #333333;
等
首先明确两点
1、vue-router、vuex、scss的文件层级跟着组件的文件层级走。
2、组件的文件层级依照项目的功能模块划分。
在此基础上我们可以建立如下文件层级结构,尽量让根目录足够干净,文件尽量收录在对应的具体模块文件夹中。
这样可以让文件层次够清晰,方便直接找到功能配置和具体业务代码,这对之后的维护影响还是很大的。
我们可以初步把组件分为三类:根组件、页面组件、其他组件:
本文详细介绍了移动端vue项目构建全过程,方便新手体验完整流程,具体页面搭建就是堆积木了。关于接口配置部分仍在研究,这部分需要后端接口支持、以及多种情况的实验,等什么时候研究透了再详细写一下。
以上是脚本宝典为你收集整理的vue项目实践1——构建项目全部内容,希望文章能够帮你解决vue项目实践1——构建项目所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。