300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue移动端项目基础框架搭建

vue移动端项目基础框架搭建

时间:2024-08-04 05:45:58

相关推荐

vue移动端项目基础框架搭建

本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档。

移动端vue项目基础框架搭建,主要包括6个步骤

项目使用的脚手架vue-cli搭建模板,2、使用淘宝lib-flexible搭配rem实现页面的自适应布局,为了方便代码编写使用rpx2rem转化px,使用scss样式预编译器,4、接口封装的aixos封装请求,5、项目中使用vuex和vue-router(在搭建快速模板的时候,问你要不要路由你选个是,会自动生成路由模块),6、引入公用的字体文件,这样移动端的vue框架就基本满足使用了,接下去ui的扩展和应用后续再说喽

1、用脚手架vue-cli 3.0快速搭建模板(网上很多,也有很多教程,node,vue-cli该升级的早点升级)

我找了一个/weixin_43068247/article/details/8208,文档后很多任意找一个都可以。。没什么好说的

//安装脚手架npm install -g @vue/cli//快速安装vue create project-name

2、既然是移动端,那移动端的自适应,采用淘宝的lib-flexible的库,下载依赖,

npm i lib-flexible -S

在项目的主文件main.js中引入,并且在其中使用如下图所示

//引入import 'lib-flexible/flexible.js'//使用if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}

3、使用px2rem将px自动装成rem单位,rem是什么东东,自己百度喽

//安装npm install px2rem-loader

vue中配置 在build下的 utils.js中,找到generateLoaders 方法,在这里添加

var px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 37.5}}function generateLoaders(loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, px2remLoader, postcssLoader] : [cssLoader, px2remLoader]// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}}

4、scss预编译器

//引入依赖npm install sass-loader node-sass --save-dev

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{test: /\.sass$/,loaders: ['style', 'css', 'sass']}

添加后配置如下

在需要用到sass的地方添加lang=scss

5、封装axios,这个就完全根据个人喜好来封装,你是直接用还是封装后引入使用还是封装后全局使用,看你自己的喜好,网上的资料比较较多,这里就不介绍了。。

6、状态管理器vuex使用请参保文档/zh/guide/,vue-router也是一样,文档很清晰,使用也很方便

7,字体全局引入

完成后,你就有一个基础的移动端基础的框架了,每个步骤的文档,网上文档很多,可以单独查看,本文提供一个整体的思路

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。