Vue脚手架的简单使用实例

提前申明

注意:自己对vue脚手架的理解和认识,很多东西和理解都是形象上的手法,并不专业和官方

webpack

一种项目构建工具,可以将css和js压缩成一个文件。此外,可以提供测试用服务器。使用webpack时,可以配置一些默认扩展名 和 路径别名 来在项目文件里直接使用

导入和导出

使用export命令可以将一个JS对象导出,其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用,但是在导入时,必须知道导入导出对象的名字。如果使用export default命令导出对象的话,其他JS文件在导入时就无需知道导出对象的名字,可以自定义对象名

ps:exportimport为es6规范中的关键字,目前仅被少量JS运行平台实现,在脚手架里会被自动用babel转换成es5对应

语法组件中自定义标签名的大小写问题

在大多数浏览器解析HTML时,不区分标签的大小写。自定义标签中的大写字母会被自动转换为小写字母,如<First></First>会被转换为 first 标签,因此导致与注册时提供的标签名不一致,出现组件未正确注册的错误。

如果使用自定义组件时,代码写在template标签里,在解析时就会被当做JS解析,是区分大小写的。

组件的另外一种写法

<body>

<template id="first-c">
  <!--template以下才是组件的HTML模板,仍然只能有一个根标签-->
  <div>这是我第一个组件</div>
</template>
<div id="app">
  <first></first>
</div>
<script>
  var myTemplate = {
    template:"#first-c"
  }

  Vue.component("first",myTemplate);
  var app = new Vue({
    el:"#app"
  });
</script>
</body>

使用脚手架创建项目安装NodeJS

脚手架的安装及运行均依赖NodeJS,可以在命令行键入node -v来查看是否安装NodeJS。

下载NodeJS

配置npm全局路径

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
之后将第一个路径同时配置到环境变量path中。

配置淘宝npm镜像

npm config set registry https://registry.npm.taobao.org

安装vue-cli

在命令行中执行npm install -g vue-cli

创建模板项目

//vue init 模板名 项目名

vue init webpack simple

模板名可以在 https://github.com/vuejs-templates查看,推荐使用webpack。

之后使用cd 项目名进入项目根目录,使用npm install来自动安装项目依赖。

其他常用命令

项目根目录下执行npm run dev可以测试运行项目,执行npm run build可以正式编译项目到dist目录下。

目录结构

单文件组件

<template>
  <!--template以下才是组件的HTML模板,仍然只能有一个根标签-->
  <div>
    我是一个单文件组件
  </div>
</template>

<script>
export default {
  //无需写template,data仍然以函数返回,其他属性照旧
  data(){
    return {
    }
  },
  props:[],
  methods:{
  }
}
</script>

<!--这个scoped可以让这些样式仅在当前组件生效-->
<style scoped>

</style>

补充:在Vue脚手架中使用jquery和其他框架

在项目根目录安装jquery npm install jquery(注意大小写,jquery和jQuery不一样)。

build目录下的webpack.base.conf.js

开头加入

const webpack = require("webpack")

module.exports的最后加入(注意JS代码格式,不要忘了写逗号)

plugins: [
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  })
]

之后,需要使用jquery的组件中导入juuery,如

<script>
  import $ from 'jquery'
  export default{
    data(){
      return {
        users:null
      }
    },
    created(){
      $.get("http://127.0.0.1:3000/all_user",function(data){
        this.users = data;
      }.bind(this))
    }
  }
</script>

使用其他js框架的方法链接

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

(0)

相关推荐

  • 手把手教你使用vue-cli脚手架(图文解析)

    写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑,特此写了一篇搭建环境的教程,每一步尽量详细解析.需要的朋友可以过来参考下. vue-cli脚手架的优势: 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目. vue-cli是官方支持的一个脚手架,会随本版本进行迭代更新. vue-cli提供了一套本地的nod

  • Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项

  • 用vue快速开发app的脚手架工具

    前言 多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本文最大特点: webpack4 多页面 跨域Proxy代理 VConsole移动端调试,手机上的开发者工具 es6/es7 babel 转换 项目地址 GitHub 使用手册 MogoH5+ 是一个 vue 多页面 脚手架工具 ,结合 H5+可以快速开发安卓与苹果 APP. 即使不适用 Hbuild

  • 详解vue组件开发脚手架

    generator-vue-component可以快速生成自己的组件开发的脚手架,类似于vue-cli生成vue项目,这脚手架是目录结构是方便组件开发和调试 由于脚手架是由yeoman搭建,所以必须全局安装yeoman npm install yo 然后全局安装generator-vue-component npm install generator-vue-component -g 到项目目录,获取对应的开发模板 yo vue-component-developer 运行上面命令会弹出下面,依

  • vue脚手架中配置Sass的方法

    世界上最成熟.最稳定.最强大的专业级CSS扩展语言! 兼容CSS Sass完全兼容所有版本的CSS.我们对此严格把控,所以你可以无缝地使用任何可用的CSS库. 特性丰富 Sass拥有比其他任何CSS扩展语言更多的功能和特性.Sass核心团队不懈努力,一直使其保持领先地位. 成熟 Sass已经经过其核心团队超过8年的精心打造. 行业认可 一次又一次地,行业把Sass作为首选CSS扩展语言. 社区庞大 数家科技企业和成百上千名开发者为Sass提供支持. 框架 有无数的框架使用Sass构建.比如Com

  • vue脚手架及vue-router基本使用

    首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具,对于刚接触的新手们建议关闭,不然代码写的不符合它的规范你的编译器会一直报错,如下图 安装好脚手架之后就像这样 终端输入npm run dev,然后打开localhost:8080就可以看到项目运行啦 大致分析一下几个比较常用的文件把,如下图 1.bu

  • vue脚手架搭建过程图解

    vue脚手架是个好东西,能够快速搭建vue单页面应用,vue是基于node环境的,所以要先安装node,去官网下载安装就可以. 进入某个文件夹的命令为: 查看node版本: 搭建步骤为: 出现下图说明搭建成功: 按照提示输入: 如果出现下图说明运行成功: 在浏览器中按照指示输入: 运行结果为: ok,至此vue脚手架就搭建完成了! 总结 以上所述是小编给大家介绍的vue脚手架搭建过程图解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 全新打包工具parcel零配置vue开发脚手架

    parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上 项目地址: https://github.com/w3c-king/parcel-vue 初始化项目 $ git clone https://github.com/w3c-king/parcel-vue.git 安装依赖 $ cd parce-vue $ npm install 其中 parcel-bundler 是主要的工具,对于 vue 结尾的单文件,需要单独处理文件类型,

  • Vue脚手架的简单使用实例

    提前申明 注意:自己对vue脚手架的理解和认识,很多东西和理解都是形象上的手法,并不专业和官方 webpack 一种项目构建工具,可以将css和js压缩成一个文件.此外,可以提供测试用服务器.使用webpack时,可以配置一些默认扩展名 和 路径别名 来在项目文件里直接使用 导入和导出 使用export命令可以将一个JS对象导出,其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用,但是在导入时,必须知道导入导出对象的名字.如果使用export default命令导出

  • vue服务端渲染操作简单入门实例分析

    本文实例讲述了vue服务端渲染操作.分享给大家供大家参考,具体如下: 想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事!!! 一,首先实现下官网的基本案例 随便建一个目录,然后执行npm init初始化项目,生成工程文件package.json:创建server.js:然后按照vue-ssr官方链接:https://ssr.v

  • vue中的非父子间的通讯问题简单的实例代码

    官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>

  • 基于vue.js路由参数的实例讲解——简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

  • vue.js的简单自动求和计算实例

    一.导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> 二.前端页面 我用了一个表格,话不多说直接上代码 <div id="vuetest"> <table> <tr> <td>数学</td>

  • vue实现一个简单的分页功能实例详解

    这是一个简单的分页功能,只能够前端使用,数据不能通过后台服务器进行更改,能容已经写死了. 下面的内容我是在做一个关于婚纱项目中用到的,当时好久没用vue了,就上网区找了别人的博客来看,发现只有关于element_ui的,基本全是,对自己没用什么用,就自己写了一个,效果如下: 点击相应的按钮切换到对应的内容内容: 下面我只发核心代码,css样式就不发了,自己想怎么写怎么写 <!-- 分页内容 --> <ul class="blog-lists-box"> <

  • 使用Vue完成一个简单的todolist的方法

    看了两天的Vue,还是上手写一个简单的todolist更实用(文末有彩蛋). 一.使用vue-cli脚手架快速搭建一个框架 利用vue-cli来自动生成我们项目的前端目录及文件,方法: npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev 这样我们的一个基于webpack的vue项目目录就可以快速构建好了. 目录如下: 二.完成一个简单的todolist 接下来就看一下we

  • vue的toast弹窗组件实例详解

    相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需 在 <template> 里面写 <toast :show="true" text="弹窗消息

  • 一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)

    Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api. 本文将详细介绍关于利用webpack搭一个vue脚手架的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 二.目

随机推荐