网站建设资讯

NEWS

网站建设资讯

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.vuehome.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 移动端项目创建 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

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

你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧


网站名称:Vue移动端项目创建-创新互联
标题路径:http://njwzjz.com/article/dhciih.html