Vue.js 学习入门:介绍及安装

Posted A SONG

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js 学习入门:介绍及安装相关的知识,希望对你有一定的参考价值。

Vue.js 是什么?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

详细讲解内容可见:一句话理解Vue核心内容 (这块内容之后再做个阅读笔记:见《一句话理解Vue核心内容》阅读笔记

环境搭建

1.下载 nodejs(http://nodejs.cn);

  • node -v 终端查看安装成功

  • npm -v 查看npm版本安装成功

2.安装 vue 命令:npm install vue ;安装vue脚手架 :npm install --global vue-cli

  • vue脚手架(vue-cli) 可用于快速搭建大型单页应用。

使用 vue-cli 构建单页应用

 //1、全局安装Vue-Cli
  npm install -g vue-cli
 //2、进入创建项目目录下
 //3、创建使用webpack模板的Vue单页应用,Enter后根据提示完成项目的创建
  vue init webpack projectname
 //4、进入项目目录下
  cd projectname
 //5、下载项目引用的包
  npm install
 //6、运行项目
  npm run dev

以上命令执行完后,在浏览器中输入http://localhost:8080/ 出现vue的界面就是创建成功

Vue 的使用

如何在项目中使用vue;可以通过引用下载好的vue.js文件;也可以通过cdn形式引入

1.下载的vue.js 文件

 //在html中引入vue的包文件
<script type="text/javascript" src="包文件地址/vue.js"></script>

新手最好引入vue.js有提示,vue.min.js是压缩版本

2.通过cdn形式

<script  src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

参考个人笔记:前端框架vue学习笔记:环境搭建

参考

以上是关于Vue.js 学习入门:介绍及安装的主要内容,如果未能解决你的问题,请参考以下文章

第二节:简易安装 和 快速入门Vue.js

Vue的安装及使用快速入门

vue入门及组件间传值代码

98vue.js简单入门

Vue的入门之安装

新人成长之入门Vue.js指令介绍