精华内容
下载资源
问答
  • Vue 搭建移动端 h5 项目步骤
    万次阅读 多人点赞
    2020-08-04 14:38:01

    Vue 搭建移动端 h5 项目步骤

    简介

    最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目,没有整体的思路,于是我就写了这个步骤。

    准备阶段

    1. 确定项目 ui 框架

      现阶段比较好的 Vue 移动端 ui 框架:vantvuxcube-uiMint-UIMuse UINutUI 等。

    2. 选择css预处理样式语言,(vue-cli 里选择)

      lesssassstylus都可以,vue-cli 3 后的版本对应的webpackloader都是配置好的,只需下载对应的包就好了。使用建议:一般选择的css预处理语言和 ui 框架的预处理语言一致为好,类如vant使用的是less,则项目中优先使用less

    3. 是否需要集成 eslintstylelintprettiergit hookslint-staged,一般建议eslint是必要的,其他不做强制要求,这些都是后面可以自己手动添加的。

    4. 使用 Vue-cli 生成的项目,集成 vuexvue-routercss预处理语言eslint等。

      项目目录

      ├── babel.config.js
      ├── package.json
      ├── public
      │   ├── favicon.ico
      │   └── index.html
      └── src
          ├── App.vue
          ├── assets
          ├── components
          ├── main.js
          ├── router
          ├── store
          └── views
      

    样式和适配

    1. 重置样式

      一般是需要加载reset.css 或者normalize.css,用来重置和保护各大浏览器的样式。一般建议使用normalize.css

    2. 安装并导入准备阶段选择好的 ui 框架

    3. 选择移动端适配方案

      现在主流的适配方案是remvw,老项目用的rem比较多,随着时间的推移,vw的适配方案会占优势。一般建议新项目直接上vw适配方案。

      适配方案链接:

      rem 实现移动端适配

      vw 实现移动端适配

    4. 全局样式定义。全局样式变量定义:颜色,字号,宽度等

    工具插件的添加

    1. 请求工具的添加(配合环境变量 .env 配置设置 baseUrl,后文有提到)

      主流的请求库:

      axios(支持 React Native,Node,浏览器)

      fly.js(支持 Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器)。

      一般需要自己根据项目封装,常见的需要封装请求拦截器和响应拦截器。

    2. vuex全局状态的添加,涉及到登陆,全局 ui 状态管理等。

    3. Vue插件的添加,过滤器,混入,钩子等。

    4. 添加vue-router 的导航守卫。 可选

    5. fastclick 解决移动端 300 毫秒延迟问题

    6. vconsole 方便移动端 debug

    7. 其他工具的添加,时间处理,深拷贝,函数节流防抖等。

    项目 eslint,stylelint ,prettier 的配置

    1. 配置.eslintrc.js

      一般继承@vue/eslint-config-standard这个插件的,具体的规则需要在rules字段定义

    2. 配置.stylelintrc可选

      一般继承stylelint-config-standard这个插件的,具体的规则需要在rules字段定义

    3. 配置.prettierrc.js可选

      一般配置

      module.exports = {
        trailingComma: 'none',
        tabWidth: 2,
        semi: false,
        singleQuote: true,
        jsxSingleQuote: true,
        bracketSpacing: true,
        arrowParens: 'avoid'
      }
      

    项目命令和环境变量配置

    1. 根据 webpack 的模式定义环境变量文件,模式可以自己定义

      .env.dev  #测试环境变量文件,不打包的话不用配置
      .env.development #开发环境变量文件
      .env.production #生产环境变量文件
      

      Vue 项目环境变量以VUE_APP开头,特殊项目变量除外。例如:

      .env.development文件

      NODE_ENV=development
      VUE_APP_BASE_API=https://api.ex.com
      VUE_CLI_BABEL_TRANSPILE_MODULES=true
      
    2. 根据上面定义的模式配置 npm 脚本

      package.json 文件

      "scripts": {
          "serve": "vue-cli-service serve",
          "dev": "vue-cli-service serve",
          "lint": "vue-cli-service lint",
          "build:prod": "vue-cli-service build --mode production",
          "build:dev": "vue-cli-service build --mode dev"
      }
      
    3. gitHooks lint-staged 的配置, 可选

    vue.config.js(webpack) 的配置

    1. deServer 的配置,

      常见的端口,代理,是否打开浏览器等。

    2. webpack 的配置

      一般需要配置gzipdrop_console等。

    3. alias 的配置,项目一般会默认设置, 可选

      一般需要配置@:src

    4. 其余的常见配置,可选

      publicPath: './',
      outputDir: 'dist',
      assetsDir: 'static',
      productionSourceMap: false,
      lintOnSave: true
      
    更多相关内容
  • 学习vue搭建cnode社区

    2019-08-10 09:10:29
    学习vue,搭建cnode社区
  • vue网页模板
  • 该项目包含的知识点(包括 webpack、 Vuex、vue-router 等)来开发一个具有代表性的电商网站项目。所涉及的内容涵盖了许多典型场景,如商品列表按照价格、销量排序:商品列表按照品牌、价格过滤:动态的购物车;使用...
  • 主要介绍了webpack4+Vue搭建自己的Vue-cli,对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧
  • 基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板
  • 等额本金与等额本息的计算全过程,以及图形可是化展示,通过Vue搭建制作交互过程
  • vue搭建后台管理系统模板,能帮助你快速配置好webpack等功能,大神必备神器,导入即用,无需更改!
  • 本项主要介绍echart+element ui+vue成功搭建CDN项目
  • 1.vue脚手架开发的简单企业站 2.暂时没有对接后端 3.只实现前端基本功能展示(首页,关于我们,联系我们,产品中心,详情,招商加盟等) 4.可以做二次开发和学习用,可以根据vue,在复杂的知识海洋中,整理整个vue...
  • 主要为大家详细介绍了vue搭建多页面多系统应用的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 基于Vue搭建Cesium环境

    2021-05-12 21:48:41
    基于Vue搭建Cesium环境 1、利用脚手架创建一个vue项目 vue create my-test // my-test 是项目名称 2、安装vue-cli-plugin-cesium 插件 npm install --save-dev vue-cli-plugin-cesium 3、安装完成后,使用vue ...

    基于Vue搭建Cesium环境

    1、利用脚手架创建一个vue项目

    vue create my-test // my-test 是项目名称
    

    2、安装vue-cli-plugin-cesium 插件

    npm install --save-dev vue-cli-plugin-cesium
    

    3、安装完成后,使用vue invoke 来初始化这个插件

    vue invoke vue-cli-plugin-cesium
    //vue invoke 来初始化时会有三个询问
    // 1、Please choose a version of 'cesium' from this list 请在列表中选择 cesium 的版本
    //2、whether to import styles globally. This operation will automatically import widgets.css in main.js是否全局引入样式,该操作将自动在main.js引入widgets.css?
    //3、whether to add sample components to the project components directory是否添加示例组件到项目components目录?
    

    4、项目中全局配置main.js中

    import Cesium from '../node_modules/cesium/Build/Cesium/Cesium.js'
    import 'cesium/Widgets/widgets.css'
     
    Vue.prototype.Cesium=Cesium;
    

    5、页面中调用

    <template>
       <div id="cesiumContainer"></div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {}
      },
      mounted () {
         const viewer = new this.Cesium.viewer('cesiumContainer')
         console.log('viewer:', viewer)
      }
    }
    </script>
    
    <style lang="scss" scoped>
    
    #cesiumContainer {
      width: 100%;
      height: 100%;
    }
    </style>
    

    6、效果如图所示
    在这里插入图片描述

    展开全文
  • electron-vue搭建流程

    千次阅读 2022-04-09 21:20:07
    electron能开发桌面应用,与Vue很好结合 npm install --global @vue/cli vue create electronjs的官方地址 https://www.electronjs.org/ electron-vue的官方文档地址 ...

    electron能开发桌面应用,与Vue很好结合

    npm install --global @vue/cli
    vue create

    electronjs的官方地址
    https://www.electronjs.org/
    electron-vue的官方文档地址
    https://simulatedgreg.gitbooks.io/electron-vue/content/cn/?q=
    创建项目
    vue init simulatedgreg/electron-vue my-project
    在这里插入图片描述
    进入项目目录
    cd my-project
    安装依赖
    npm install
    在这里插入图片描述
    通过package.json查看构建项目和运行命令
    在这里插入图片描述
    运行项目
    npm run dev
    在这里插入图片描述
    解决以上报红问题
    在这里插入图片描述
    下载vue-devtools插件网络问题,不影响
    在这里插入图片描述
    项目结构
    在这里插入图片描述
    开始使用,下载蚂蚁金服UI框架依赖
    蚂蚁金服UI地址:https://www.antdv.com/docs/vue/getting-started-cn/
    npm i --save ant-design-vue
    在这里插入图片描述
    在渲染线程全局main.js中导入使用
    在这里插入图片描述
    使用ant-design导航栏
    在这里插入图片描述
    运行查看
    npm run dev
    在这里插入图片描述
    打包(打包为桌面应用)
    npm run build
    在这里插入图片描述
    解决上述打包遇到问题,找到项目根目录.electron-vue/build.js修改下面代码,修改其中一对的tasks变量名(与后面一对进行区分即可,自定义修改),需要注意的是本文件中一共包含四个tasks,前两个是一对,后两个是一对,修改时请对应修改。
    在这里插入图片描述
    重新编译打包
    npm run build
    在这里插入图片描述
    分析上述报错问题,在.electron-vue\build.js 引入multispinner(安装multispinner模块),原因是在 .electron-vue\build.js文件中,代码中使用了 Multispinner ,但没有在开头引用,并且package.json文件中也没有这个依赖文件。
    解决方法:先安装 Multispinner依赖 ,再在文件中引用。
    npm i multispinner --save
    const Multispinner = require(‘multispinner’)
    在这里插入图片描述
    重新打包
    npm run build
    在这里插入图片描述
    上述打包等了很久一直没有进展
    重新指定淘宝镜像或者vpn,找到package.json,指定taobao下载镜像地址
    “electronDownload”:{
    “mirror”:“https://npm.taobao.org/mirrors/electron/”
    },
    在这里插入图片描述
    打包成功
    在这里插入图片描述
    打包文件在项目的build包下,可对build下的应用.exe文件进行安装
    在这里插入图片描述
    也可以进入win-unpacked包下直接运行应用.exe,不用安装
    在这里插入图片描述

    展开全文
  • vue搭建购物车页面

    2019-02-23 13:00:20
    利用vue搭建购物车页面webpack打包vue,js文件,共享数据双向绑定,全选和反选以及计算功能
  • 一个使用vue搭建的管理系统,主要运用了这些插件vue@2.5.2+vue-router@3.0.1+vuex@3.0.0+axios@0.17.0+element-ui@2.0.0+vue-echarts@2.5.1
  • 1.vue create vue-admin 创建项目 2.选择创建方式 默认Vue2配置 默认Vue3配置 手动选择配置 3.自定义配置选项 ( ) Babel // 语法转换 ( ) TypeScript // 使用 TypeScript ( )

    1.vue create vue-admin 创建项目

    2.选择创建方式在这里插入图片描述

    1. 默认Vue2配置
    2. 默认Vue3配置
    3. 手动选择配置

    3.自定义配置选项

    在这里插入图片描述
    ( ) Babel // 语法转换
    ( ) TypeScript // 使用 TypeScript
    ( ) Progressive Web App (PWA) Support // 支持PWA
    ( ) Router // 路由
    ( ) Vuex // store
    ( ) CSS Pre-processors // CSS 预处理器
    ( ) Linter / Formatter // 代码风格检查和格式化
    ( ) Unit Testing // 支持单元测试
    ( ) E2E Testing // 支持E2E测试

    4. 使用版本

    在这里插入图片描述

    5.这一步提示我们是否使用历史路由器,输入 n 回车在这里插入图片描述

    6.预编译器选择

    在这里插入图片描述

    7.单元测试选择方案

    在这里插入图片描述
    1.一般选jest

    8.依赖选择文件设置

    在这里插入图片描述
    选择package.json

    9. 创建成功

    在这里插入图片描述

    展开全文
  • Vue实战篇一: 使用Vue搭建注册登录界面

    万次阅读 多人点赞 2020-10-20 14:03:12
    Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:Vue的指令 Vue基础篇六:Vue使用JSX进行动态渲染 ...
  • 因为我项目中需要使用VUE,因此我接触到了VUE这个前端框架。我分享下学习VUE的流程。 一、安装vue-cli: npm install -g @vue/cli # OR yarn global add @vue/cli 二、配置vue的环境变量: 否则会出现‘vue‘ ...
  • 从本期开始,我们将开始搭建自动化测试平台,今天是第一期,我们先进行环境搭建 1、技术选型: 1、Python 2、Django 3、Django REST Framework 4、Vue 5、Element UI 6、JavaScript 7、Mysql 2、创建项目 1、在...
  • 如何使用electron-vue搭建electron项目

    千次阅读 2022-03-13 13:21:48
    第一步、使用vue-cli2构建模板项目 vue init simulatedgreg/electron-vue my-project 如果你当前使用的是vue-cli3或vue-cli4,那么你需要全局安装vue-cli2: npm install --global vue-cli 当模板现在完毕后,根据...
  • Vue 搭建一个前端项目

    千次阅读 2020-09-11 09:48:46
    一、前言 之前图省事,都是在html中引入Vue.js的CDN来使用Vue开发网站项目,其实正确的做法应该是使用Vue构建一个完整的项目,进而进行前后端...vue init webpack vue-project 一路yes! cd vue-project npm run d
  • mac vue环境搭建详细教程,实际亲测可运行。
  • 这项目vue-cli搭建简单左右布局菜单切换的源码,文档参见:https://blog.csdn.net/u012551928/article/details/84335856
  • vant + vue 搭建项目

    2020-07-28 10:43:50
    1、安装vue-cli3脚手架 npm install -g @vue/cli 2、通过vue-cli3创建项目 vue create my-project 3、安装vant 通过 npm 安装 npm i vant -S 通过 yarn 安装 yarn add vant 4、引入组件 安装插件 npm i babel-...
  • vue搭建前端项目

    千次阅读 2018-07-10 15:28:53
    于是跟着vue群的大佬开始学习,他远程帮我搭建第一个简单的项目网站,我一遍学习一边记录,在这简单记录一下知识点。0:大家可以跟着官网搭建出网站的雏形。然后来看看目录结构,由于学vue时间不长,现在只是主要在...
  • vue搭建todolist

    2018-03-27 15:34:51
    这是用vue搭建的一个本地todolist应用,本地就可以跑,支持vue1.x和2.x,可以作为vue入门练习用
  • 个人足迹记录,上传基于vue-cli搭建自己的移动端项目。
  • 使用Python+Django+drf+vue搭建测试平台—4搭建vue前端项目 1.搭建vue前准备工作 2.安装vue 3.安装Visual Studio Code 4.创建vue项目 搭建vue前准备工作 1、下载地址为:https://nodejs.org/en/ 2、检查node是否...
  • 基于Vue搭建自己的博客

    千次阅读 2019-04-07 05:07:43
    博客前台 ...(๑◡๑) 前言 以前我们是用hexo + next来搭建自己的博客,但最近学习了Vue...所以就用了Vue搭建了一个自己的个人博客。Vue实际上对应着MVVM模式下的View图层,要搭建一个完整的应用仅仅只有Vue是不够的,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 105,102
精华内容 42,040
关键字:

vue怎么搭建