Vue.js 3 By Example(Vue.js示例)

  • 更新时间:
  • 3570人关注
  • 点击下载

这是一个不错的Vue.js示例类学习资源,由鄂弘厚 提供,主要知识点是关于Vue.js、Vue.js示例、Vue.js示例的内容,已被885人关注,同类资源中评分为9.3分。

精选笔记:vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

18小时1分钟前回答

Vue 安装

vue-cli /webpack 全局安装

如果在意安装速度,可以使用淘宝镜像来安装

安装淘宝镜像

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

安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦

我个人比较喜欢直接使用npm 安装:

全局webpack:

npm install webpack -g

vue脚手架vue-cli:

npm install vue-cli -g

安装webpack 版vue 项目

在指定的目录中打开命令窗口(编辑器中自带的命令窗口也可以)

vue init webpack myvuedemo

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

  • Project name (回车默认)
  • Project description (A Vue.js project) 回车默认 (也可以输入自己的描述)
  • Author 回车默认(自己的名字)
  • Vue build 默认选择 Runtime+Compiler

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

Install vue-router?Y 安装

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

Use ESLint to lint your code? Y (推荐使用,保持良好的代码编写规范)

pick an eslint preset. 默认 Standard

set up unit tests ? n (unit 测试,不需要)

setup e2e tests with Nightwatch?n (e2e 测试,不需要)

Should we run npm install for you after the project has been created? (recom
mended) npm (选用 npm )

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

安装完毕

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

目录结构

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

Vue运行

运行命令

cd myvuedemo
npm run dev

运行成功

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

页面内容

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

Vue build 打包

打包命令

npm run build

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

打包后的目录结构

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

运行打包项目

需要开启服务运行

使用http-server 运行(如没有安装http-server的,使用node 全局安装 http-server 即可,npm install http-server -g)

cd dist
http-server

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

运行打包后的内容

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

从搭建到运行打包发布全部完成,是不是很简单呢?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

展开阅读

相关资源

  • Vue.js项目开发实战

    Vue.js项目开发实战

    大小:186.6 MBVue.js

    立即下载
  • Vue.js权威指南

    Vue.js权威指南

    Vue.js 是一个用来开发Web 界面的前端库。 《Vue.js权威指南》 致力于普及国内Vue.js 技术体系,让更多喜欢前端的人员了解和学习Vue.js。如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣

    大小:139 MBVue.js

    立即下载
  • Vue.js快速入门

    Vue.js快速入门

    目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

    大小:186.6 MBWeb前端

    立即下载
  • Vue.js快速入门

    Vue.js快速入门

    目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。

    大小:26581 MB MVue.js入门

    立即下载
  • Vue.js v3.0教程(Vue3 教程)

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库 (opens new window)结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    大小:3.9 MBVue.js

    立即下载

学习笔记

10小时35分钟前回答

用 Vue.js 递归组件实现可折叠的树形菜单(demo)

在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `!--Invoking myself!-- recursive-component/recursive-component` }); 递归组件常用于在blog上显示注释、嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同。例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。 数据结构 一个树状UI的递归组件将是一些递归数据结构的可视化表达。在本教程中,我们将使用树状结构,其中每个节点都是一个对象: 一个 label 属性。 如果它有子节点,一个 nodes 属性,则它是一个或多个节点的数组属性。 与所有树结构一样,它必须有一……

24小时44分钟前回答

几个你不知道的技巧助你写出更优雅的vue.js代码

1. watch 与 computed 的巧妙结合 如上图,一个简单的列表页面。 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ this.fetchData() } } 如果参数比较多,比如上图 关键字筛选, 区域筛选, 设备ID筛选, 分页数, 每页几条数据, 可能会是这样: data(){ return { keyword:'', region:'', deviceId:'', page:1 }},methods:{ fetchData(paramrs={ keyword:this.keyword, region:this.region, deviceId:this.deviceId, page:this.page, }){ this.$http.get("/list",paramrs).then("do some thing") }},created(){ this.fetchData()},watch: { keyword(data){ this.keyword=data this.fetchData() }, region(data){ this.region=data this.fetchData() }, deviceId(data){ this.deviceId=data this.fetchData() }, page(data){ this.page=data this.fetchData(……