文档章节

Vue.js学习进程

SingularD
 SingularD
发布于 2017/08/08 20:02
字数 747
阅读 13
收藏 0

    今天开始复习了一下vue,那我就总结一下vue的一些基础:

    一、安装:

    vue的安装模式有两种,一种是单文件直接引入:将vue下载好之后,直接利用<script>标签引入。但是这种引入方式我不推荐,这不利于开发,再次我也不多说了;然后是第二种安装方式:通过npm安装,在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。首先,什么是npm?

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

对于刚接触到npm的我来说,我也不能具体地说出这个东西,就感觉用它很方便,通过安装npm你就会发现效率会大大提升,下面我来介绍通过npm安装vue-cli(vue-cli:Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目)

  安装npm:

npm install vue

全局安装vue-cli:

npm install --global vue-cli

建立一个基于webpack模板的新项目(此处myproject为项目名称):

npm init webpack myproject

最后打开项目文件夹,安装依赖,运行项目:

cd myproject
npm install
npm run dev

注意在全局安装了vue-cli后,之后只需要进行后面两步即可。

看到浏览器出现这个页面就成功啦~

接下来用IDE打开项目(我的是webstrom):

在这里面(我的项目名称是study),“src”文件里面的使我们需要配去写代码地方,components是放组件的地方,App.vue文件是总页面,所有组件最后都要汇集在哪里,具体怎么汇集我后面会说的。

接下来我将用代码展示如何实现Hello World:

这是组件HelloWorld.vue文件的代码

<template>
  <h1>Hello World</h1>
</template>
<script>
  export default {
    name: 'HelloWorld'
  }
</script>

这是App.vue主文件的代码:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</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>

这主要是针对原文件的修改:style样式是默认的。

这就修改后的界面啦~~

今天的总结就到此,明天继续。

© 著作权归作者所有

SingularD
粉丝 2
博文 17
码字总数 6512
作品 0
成都
程序员
私信 提问
用vue3公开的思路从0实现最简化的vue

名词解释 浏览器标准:本文中作为es6、css3、h5的统称 我们为什么要学习vue的实现 我们用vue,是因为它是当前业界最佳的解决方案之一,但前端技术方案迭代及工业标准化发展的浪潮,大概率不会...

zzz945
04/21
0
0
基于 vue 构造 electron 应用程序的样板代码 - electron-vue

electron-vue —— 基于 vue 来构造 electron 应用程序的样板代码。 概要 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 作为脚手架工具,加上拥...

匿名
2018/02/24
3.2K
1
electron-vue 打包流程

安装: 【注意是2.x版本的cli,并不是3x】 文档:simulatedgreg.gitbooks.io/electron-vu… 创建: electron-vue是SimulatedGREG基于vue-cli搭建的Vue+Webpack+Electron脚手架,可以用来开发...

一只小码蚁
08/27
0
0
利用webpack4搭建vue服务器端渲染SSR(一)

阅读前 为什么使用服务器渲染? 👉官方解释 应该对VueSSR指南简单了解👉官方文档 应该对webpack简单了解👉官方文档 Node.js框架Koa简单了解👉官方文档 正文 构建服务器端渲染(SSR)我们...

lihaozecq
2018/10/30
0
0
好程序员web前端分享菜鸟Vue学习笔记(二)

好程序员web前端分享菜鸟Vue学习笔记(二),今天天气不错,心情也不错,最近学习Vue越来越顺利了,今天接着学习,接着记录。 首先,来学习下常用的v-bind属性,它的作用是在属性中使用vue中...

好程序员IT
05/09
30
0

没有更多内容

加载失败,请刷新页面

加载更多

x002-语言元素

变量命令规则 硬性规则: 变量名由字母(广义的Unicode字符,不包括特殊字符)、数字和下划线构成,数字不能开头。 大小写敏感(大写的a和小写的A是两个不同的变量)。 不要跟关键字(有特殊...

伟大源于勇敢的开始
今天
4
0
nginx反向代理配置

nginx配置文件位置/usr/local/nginx/conf/nginx.conf 配置文件修改: # cd /usr/local/nginx/conf # vim nginx.conf server {listen 80;server_name localhost;#charset k......

行者终成事
今天
5
0
OSChina 周日乱弹 —— 这是假的,和我之前的不一样

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
8
0
Rust学习笔记一 数据类型

写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差。 自学了Java、Kotlin、Python、...

MusiCodeXY
今天
5
0
Java 脚本引擎入门

Java Script Engine Java 脚本引擎可以将脚本嵌入Java代码中,可以自定义和扩展Java应用程序,自JDK1.6被引入,基于Rhino引擎,JDK1.8后使用Nashorn引擎,支持ECMAScript 5,但后期还可能会换...

阿提说说
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部