Vue 移动端项目创建

前言

移动端我们一般通过Vue脚手架手动自定义创建项目，
只需要Node环境我们就可以通过npm下载Vue脚手架，通过命令创建项目。

npm下载脚手架

npm install -g @vue/cli

执行创建命令

vue create geek-client-mobile

选中自定义创建

选择Vue版本，依赖Babel降级ES6语法，依赖vue-router，依赖vuex，使用css预处理器，使用代码风格校验。

选择vue2.0版本

是否使用历史模式API，输入 n

选择less这种css预处理器

选择通用语法风格配置

语法风格校验的时机，保存代码校验，提交代码校验且自动修复。

选择使用不同的配置文件对于所依赖工具

是否记录此次操作记录，输入 n

最后把下载好的项目下包启动就可以了。

1.项目文件基本删除

删除项目创建时默认生成的一些文件
来到 views 文件夹，删除里面默认的 about.vue 和 home.vue
来到 App.vue 删除里面的默认代码，使用一个空白的vue结构（快捷键： `` ）
来到 assets 文件夹，删掉里面默认的logo图片
来到 components 文件夹，删掉里面默认的 helloword.vue
来到 router/index.js 里，把导入的home和默认的路由规则删掉

2.基本全局样式

来到 src 新建 styles 文件夹，再新建 base.less 文件，里面写一些基本的全局样式

*{font-size: 14px;margin: 0;padding: 0;
}

来到 main.js 导入这个全局样式
安装使用normalize.css
- 下载 npm i normalize.css
- 在mian.js导入 import 'normalize.css'

3.vant组件按需导入

因为本项目会使用 vant 进行布局，所以我们要导入vant，可以使用 按需导入vant的方式来节约体积
vant-vue2.x官网： Vant 2 - Mobile UI Components built on Vue
注意：vant官网已经升级了，指定的默认版本为 vue3.x的版本，所以要下载vue2版本的vant，要使用如下代码

npm i vant@latest-v2 -S

需要下载自动按需导入依赖的插件 babel-plugin-import

npm i babel-plugin-import -D

来到 babel.config.js 文件，复制如下配置

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
}

总结：

经过这一趟流程下来相信你也对 Vue 移动端项目创建有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕

Vue 移动端项目创建相关推荐

Vue移动端项目---尚硅谷外卖
文章目录 Vue移动端项目--尚硅谷外卖项目目录结构介绍移动端适配头部和底部导航登录注册页面密码登录短信登录 Profile页面未登录已登录 Msite页面首页导航 ShopList ...
2021-03-24 从零开始搭建vue移动端项目
从零开始搭建vue移动端项目一.Vue项目搭建二.使用步骤 1.初始化 2.路由 3.Vuex(状态管理) 4.Axios(数据请求模块) 5.使用Less 6.移动端适配 7.注意事项 8.移动 ...
vue移动端项目缓存问题实践
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧! 先描述下问题场景:A页面->B页面->C页面.假设A页面是列表页面, ...
vue移动端项目日历组件，月周切换，点击进入上/下一个月
项目场景: Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个.组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看. 我 ...
vue移动端项目实现真机调试
在vue移动端项目中,我们可以通过真机调试来更好的看到项目实际运行在移动端的效果. 下面就来介绍一下实现的方法: 1.使手机与电脑连接在同一个wifi下 2.修改vue.config.js文件配置将 ...
vue移动端项目实现定位
vue移动端项目实现定位腾讯地图官方地址 <template><div><div id="container&q ...
vue移动端项目基础框架搭建
本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档. 移动端vue项目基础框架搭建,主要包括6个步骤项目使用的脚手架vue-cli搭建模板,2.使用淘宝lib-fl ...
从零开始搭建vue移动端项目到上线的步骤
初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...
Vue 移动端项目开发流程
目录移动端电影项目 1.项目效果 2.开发项目流程 3.开发环境 4.初始化项目 5.vant 移动端组件库介绍 5.5.1.安装 5.5.2.自动按需引入组件 (推荐) 5.5.3.移动端样式设 ...

Vue 移动端项目创建

前言

Vue 移动端项目创建相关推荐

最新文章

热门文章