精华内容
下载资源
问答
  • 如何把uniapp的vue小程序项目跑起来

    千次阅读 2020-07-19 16:10:59
    上图项目是用uniapp新建的项目,但是由于对前端的不太熟悉,可能早已忘了如何install 一个vue项目了,这时候我们可以看到有一个package.json点进去发现有一个script脚本,里面详细记录着启动何种小程序。 这时候...

    新人学习,熟人请绕过。

    当我们把项目clone下来后,我们可以尝试着多点一些一级目录文件。
    如下图:

    在这里插入图片描述
    一般来说src会是代码文件,剩下的一些大概率就是项目配置文件了。
    上图项目是用uniapp新建的项目,但是由于对前端的不太熟悉,可能早已忘了如何install 一个vue项目了,这时候我们可以看到有一个package.json点进去发现有一个script脚本,里面详细记录着启动何种小程序。
    在这里插入图片描述
    这时候我们只想启动一个H5版的小程序,我们可以看到有"serve": "npm run dev:h5",

    so,我们可以这样启动:

    npm run serve
    

    在这里插入图片描述

    更多个人教程请访问个人主页:

    Github搭建个人博客(2019最新版,亲测)

    .https://blog.csdn.net/xudailong_blog/article/details/78762262

    公众号:
    在这里插入图片描述

    展开全文
  • 该程序是企业在创立初期很好的技术基础框架,加快公司项目开发进度,当然也可以对现有的系统进行升级; 个人开发者也可以使用该程序承接外包项目;...springboot vue 小程序 全开源内容、支持在线文档查看
  • 主要介绍了vue中和小程序中使用iconfont的方法,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 详细讲解如何使用 Vue CLI 搭建前端项目以及项目结构分析。

    前言

    从这篇文章开始,就进入真正的实践了。

    在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue。利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 Vue 的特性的。这点在接下来的内容中我们可以慢慢感受。

    关于项目的构建其实类似的文章网上有很多,但我还是重新写了一下,一是为了确保项目能够运行成功,二是对几个细节作了解释,三是加入了使用 IDE 的构建方法。

    在动手操作之前,我希望大家已经清楚什么是 “前后端分离” ,什么是 “单页面应用”

    简单地说,前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互,而 单页面应用(single page web application,SPA),就是只有一张页面,并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

    附上 Vue 的官方教程:
    https://cn.vuejs.org/v2/guide/

    这是第一手的学习资料,本篇的实践内容虽然用不上,但是日后要经常查阅。

    一、安装 Vue CLI

    因为需要使用 npm 安装 Vue CLI,而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/en/,首页即可下载。
    在这里插入图片描述
    图中左边是长期支持版本,右边是当前版本,下载哪个都行,我一般选择长期支持版本。

    下载完成后运行安装包,一路下一步就行。然后在 cmd 中输入 node -v,检查是否安装成功。
    在这里插入图片描述
    如图,出现了版本号(根据下载时候的版本确定),说明已经安装成功了。同时,npm 包也已经安装成功,可以输入 npm -v 查看版本号
    在这里插入图片描述
    输入 npm -g install npm ,将 npm 更新至最新版本。
    在这里插入图片描述


    之后可以选择安装 cnpm,即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快,但是下载的包可能不是最新的。

    安装 cnpm 的命令为 :

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    完成后就可以使用 cnpm 替代 npm 了,我不太喜欢用 cnpm,喜欢用的小伙伴注意一点,cnpm 不要与 npm 混合使用,一个项目用 cnpm 就从头用到底,不要中途敲错命令,否则就会出现混乱。不过万一遇到这种情况也不用慌,把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了,只是比较浪费时间。


    之后,使用 npm install -g vue-cli 安装脚手架。
    在这里插入图片描述
    注意此种方式安装的是 2.x 版本的 Vue CLI,最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目,并加入了项目健康监控的内容,但使用新版本创建的项目依赖与这个教程不太相符,折腾起来比较麻烦。

    虽然我也想专门针对新的 CLI 和 Vue 3.0 重构一下教程,但想了想这是个无休止的工作,这个教程也不是为了讲前端框架的新特性,而且直到现在 Vue 3.0 也只是发布了初期试验版本,想必又是一堆依赖问题,所以就不折腾了。

    二、构建前端项目

    1.通用方法

    直接使用命令行构建项目。首先,进入到我们的工作文件夹中,我在 D 盘新建了一个叫 workspace 的文件夹,大家可以自行选择位置。
    在这里插入图片描述
    然后执行命令 vue init webpack wj-vue,这里 webpack 是以 webpack 为模板指生成项目,还可以替换为 pwa、simple 等参数,这里不再赘述。 wj-vue 是我们的项目名称(White Jotter),大家也可以起别的名字。

    在程序执行的过程中会有一些提示,可以按照默认的设定一路回车下去,也可以按需修改,比如下图问我项目名称是不是 wj-vue,直接回车确认就行。

    在这里插入图片描述
    这里还会问是否安装 vue-router,一定要选是,也就是回车或按 Y,vue-router 是我们构建单页面应用的关键。
    在这里插入图片描述
    还有是否使用 es-lint,这玩意儿挺烦的,但为了代码质量先将就一下吧。

    接下来等待项目构建完成就 OK 了。
    在这里插入图片描述
    可以看到 workspace 目录下生成了项目文件夹 wj-vue,里面的结构如图
    在这里插入图片描述
    接下来,进入到我们的项目文件夹里(cd D:\workspace\wj-vue),执行npm run dev
    在这里插入图片描述
    项目构建成功,这一步如果报错,可能是未能加载项目所需的依赖包,即 node_modules 里的内容,需要在该文件夹执行 npm install ,再执行 npm run dev

    访问 http://localhost:8080,查看网页 demo,大工告成!
    在这里插入图片描述

    2.使用 IDE (IntelliJ IDEA)

    对于习惯使用 IDE 的同学,可以使用更直观的方式构建项目。以 IntelliJ IDEA 为例,点击 Create New Project
    在这里插入图片描述
    然后选择 Static Web -> Vue.js,点击 next,输入相关参数
    在这里插入图片描述
    此处可以选择 CLI 的版本
    在这里插入图片描述
    这里注意 Project location 需要输入到项目文件夹一级而不是 workspace。输入完成后点击 Next,等待 Vue CLI 初始化,然后在可视化界面上确认项目信息,修改或 Next 即可。IDEA 构建出的 Vue 项目是不含 node_modules 的,所以要先调出终端,执行 npm install
    在这里插入图片描述
    运行完成后,输入 npm run dev 即可。
    在这里插入图片描述
    另外 IDE 嘛,总是在 UI 上下了很多功夫,我们还可以在 package.json 文件上点击右键,选择 show npm scripts
    在这里插入图片描述
    然后就会出来 npm 命令窗口,想要执行哪个命令直接双击运行就可以了。
    在这里插入图片描述
    这些命令都是在 package.json 文件里预定义的。dev 和 start 是一样的,start 即是执行 npm run dev 命令
    在这里插入图片描述
    另外使用这种方法,可以激活 IDE 右上角的按钮,不过这些都不重要了。
    在这里插入图片描述
    上面的内容应该足够详细了,如果大家还是遇到了问题,可以在评论区反馈一下,我会第一时间解答。

    三、Vue 项目结构分析

    1.概览

    使用 CLI 构建出来的 Vue 项目结构是这个样子的
    在这里插入图片描述
    里面我们需要关注的内容如下图,重点需要关注的我用小红旗标了出来
    在这里插入图片描述
    其中我们最常修改的部分就是 components 文件夹了,几乎所有需要手动编写的代码都在其中。

    2.x 时代没有创建 view 这个目录,其实加上更加合理,现在我们姑且认为 Vue 把视图也当做“组件”的一部分,有助于初期的理解。

    接下来我们分析几个文件,目的是看看各个部分是怎么联系到一起的。

    2.index.html

    首页文件的初始代码如下:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>wj-vue</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    

    就是一个普普通通的 html 文件,让它不平凡的是 <div id="app"></div> ,下面有一行注释,构建的文件将会被自动注入,也就是说我们编写的其它的内容都将在这个 div 中展示。

    还有不普通的一点是,整个项目只有这一个 html 文件,所以这是一个 单页面应用,当我们打开这个应用,表面上可以有很多页面,实际上它们都只不过在一个 div 中。

    3.App.vue

    上面图上我把这个文件称为“根组件”,因为其它的组件又都包含在这个组件中。

    .vue 文件是一种自定义文件类型,在结构上类似 html,一个 .vue 文件即是一个 vue 组件。先看它的初始代码

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    

    大家可能注意到了,这里也有一句 <div id="app">,但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

    <script>标签里的内容即该组件的脚本,也就是 js 代码,export default 是 ES6 的语法,意思是将这个组件整体导出,之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。

    这个文件最关键的一点其实是第四行, <router-view/>,是一个容器,名字叫“路由视图”,意思是当前路由( URL)指向的内容将显示在这个容器中。也就是说,其它的组件即使拥有自己的路由(URL,需要在 router 文件夹的 index.js 文件里定义),也只不过表面上是一个单独的页面,实际上只是在根组件 App.vue 中。

    4.main.js

    前面我们说 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 没有关系,那么这两个文件是怎么建立联系的呢?让我们来看入口文件 main.js 的代码

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    

    这里插一嘴,这个 js 文件有的同学可能看着不顺眼,比如没有分号(;),因为是 ES6 的语法,不这么写反而会提示错误,虽说可以把 es-lint 改了或者关了,但我想熟悉一下新的规则也挺好。

    最上面 import 了几个模块,其中 vue 模块在 node_modules 中,App 即 App.vue 里定义的组件,router 即 router 文件夹里定义的路由。

    Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。

    在这个 js 文件中,我们创建了一个 Vue 对象(实例),el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标,router 代表该对象包含 Vue Router,并使用项目中定义的路由。components 表示该对象包含的 Vue 组件,template 是用一个字符串模板作为 Vue 实例的标识使用,类似于定义一个 html 标签。

    看完了以上三个文件,我想基本上就对前端项目的结构有所了解了。下一篇中我将用一个例子解释前后端分离的项目是如何联系起来的。

    查看系列文章目录:
    https://learner.blog.csdn.net/article/details/88925013

    上一篇:Vue + Spring Boot 项目实战(一):项目简介

    下一篇:Vue + Spring Boot 项目实战(三):前后端结合测试(登录页面开发)

    展开全文
  • 主要介绍了mpvue将vue项目转换为小程序的相关资料及mpvue开发流程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue项目小程序-mpvue项目创建前言创建mpvue项目 前言 这次遇到了要拿很久之前用vue写的移动端项目,改成小程序的要求。因为本人只会用原生的开发微信小程序,所以这次也是学习了一下mpvue,现在来总结一下。 创建...

    vue项目转小程序-mpvue项目创建

    前言

    这次遇到了要拿很久之前用vue写的移动端项目,改成小程序的要求。因为本人只会用原生的开发微信小程序,所以这次也是学习了一下mpvue,现在来总结一下。

    创建mpvue项目

    mpvue是美团开源的项目,先贴上官方地址:http://mpvue.com/
    创建项目前先检查一下node和npm是否安装好,然后开始安装vue-cli脚手架,注意,这要2.x版本的,3.x版本的创建不了。

    $ npm install --global vue-cli@2.9
    

    安装完之后,初始化一个基于mpvue-quickstart模板的新项目

    $ vue init mpvue/mpvue-quickstart my-project
    

    没什么特别要求的话,基本上是一路回车就好
    创建完之后就是下载依赖,启动项目拉

    $ cd my-project
    $ npm install
    $ npm run dev
    

    项目启动成功之后,目录会多了一个dist文件夹,就是把vue代码转成了小程序代码,把整个项目放到微信开发者工具就可以预览拉。

    项目创建的时候一般都有px2rpx-loader的,所以写项目的时候可以直接用px,然后编译的时候会转成rpx。
    众所周知,vue项目是用的vue-router,怎么在mpvue中用vue-router和引入第三方ui组件呢,请看小编的其他文章!

    展开全文
  • 主要介绍了使用kbone解决Vue项目同时支持小程序问题,本文通过一个todo的例子跟大家详细介绍,需要的朋友可以参考下
  • 做题H5 vue小程序

    2019-04-28 17:13:54
    做题页面H5,用到了Vue一些常用标签(没有搭建脚手架),上一题,下一题,进度条。。 Ui用到的比较杂(ui小白),有Bootstrap,element和自己写的。
  • Vue技术栈的小程序框架:对于H5平台支持普遍较弱 部分React技术栈的小程序框架:虽支持生成可在H5端运行的代码,但仅仅是代码可运行,离项目直接发行上线的目标还存在一定差距。 鉴于客观需求及现状,DCloud前端团队...
  • 上周,Megalo@0.2.0 正式发布,优化了数据更新性能的同时,支持了百度智能小程序,着实激动了一把,这“可能”是目前社区里第一个同时支持三端小程序vue 小程序框架。下面我们就来试试他的效果。 跟着文档走 官方...
  • 内含三个实战项目的演示视频+项目源码github链接 项目1.uni-app框架项目-小U商城移动端 2.Vue项目-后台管理系统 3.菜谱小程序
  • vue create -p dcloudio/uni-preset-vue my-project (创建项目) – 选择默认模板 – cd my-project – npm i node-sass sass-loader (安装sass依赖:不推荐shell安装,请打开cmd安装。 速度慢可以: cnpm i node-...

    一、创建项目流程:
    假设已全局安装vue/cli
    – vue create -p dcloudio/uni-preset-vue my-project (创建项目)
    – 选择默认模板
    – cd my-project
    – npm i node-sass sass-loader (安装sass依赖:不推荐shell安装,请打开cmd安装。
    速度慢可以: cnpm i node-sass sass-loader (假设已经全局安装cnpm:npm install -g cnpm registry=https://registry.npm.taobao.org )
    )
    出现以下错误:依次安装相关依赖即可。在这里插入图片描述
    – npm run dev:mp-weixin (启动uni-app项目)
    – 打开微信开发者工具,选择导入项目,路径为: my-project/dist/dev/mp-weixin

    Style中使用sass:
    ①先安装依赖:npm i node-sass sass-loader
    ②然后style加上

    展开全文
  • 2.9.6 初始化项目是用 vue init webpack my-project 3.0以上 初始化项目是用 vue create my-project 3.0以下 npm install -g vue-cli@版本号 3.0以上 npm install -g @vue/cli@版本号 步骤: 创建脚手架:npm ...
  • 什么是kbone 微信小程序开发过程中,许多...首先,我们来看下一个基本的 kbone 项目的目录结构(这里的 todo 是基于 Vue 的示例, kbone 也有 React , Preact , Omi 等版本,详情可移步 kbone github
  • Vue项目快速输出到小程序、H5

    万次阅读 2018-12-21 12:10:31
    uni-app是基于Vue的前端框架,开发者遵循Vue语法规范,编写一套代码,可同时编译发行到小程序、H5等多个平台;相比其他框架,优势在于直接发行,开发者无需在编译后代码上做二次开发或补充,可直接上传发布到服务端...
  • 通过 Vue.js 命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目: # 全局安装 vue-cli $ npm install --global vue-cli #...
  • 写了vue项目小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。   1|0一、生命周期 先贴两张生命周期图对比下: 1|1vue生命周期 (此图片来源于网络,如有侵权,请联系删除! )   1|2小程序生命...
  • (一般使用mpvue开发的话,是较为习惯或喜欢使用vue.js的语法,但是如果不熟悉vue的语法,都是从头开始的话,建议还是微信小程序原生开发) // 全局安装 vue-cli npm install --global vue-cli 2、创建新的项目 // ...
  • vue 开发小程序

    万次阅读 2018-06-14 11:11:26
    引言现在的前端有各种各样的新知识和新框架,小程序才出生几年,就已经火到这种程度了,所以作为前端学习者,这个新技能我们是一定要尽快get到的。学习小程序最好的方法就是自己手写一个小程序,能从中找到自己的...
  • 今天,我们来介绍一款由美团点评研发,使用 Vue.js 来开发微信小程序的前端框架 —— mpVue。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小 ...
  • 基于SpringBoot vue小程序商城项目(附源码),支持分销、团购.pdf
  • vue运动会微信小程序源码
  • 实训的时候写的一个项目,有2个使用端,用户端是微信小程序,后台管理端是vue写的网页,后端统一是一个项目Spring+SpringMVC+Mybatis。 数据库设计
  • 4.打开小程序则需要你有appid项目简介电商整套系统 pc商家管理后台 小程序客户端小程序端介绍1.商品模块功能:秒杀,算法推荐和猜你喜欢,收藏,sku选择,购物车,评论 ,会员2.活动模块功能:优惠套餐,商家推荐,...
  • 基于Vue框架微信小程序物联网项目之设计笔记–创建工程模板 Vue简介 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,498
精华内容 18,999
关键字:

vue小程序项目

vue 订阅