vue.js简明教程

最新推荐文章于 2022-05-12 22:22:08 发布

Best she。

最新推荐文章于 2022-05-12 22:22:08 发布

阅读量265

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45022883/article/details/106798249

版权

vue.js是干嘛的？
vue.js就是一个上手简单，功能强大的框架，使网页的前端开发更加高效，就像本人对前端一窍不通的能快速的搭建自己的网页：）
快速搭建
vue的搭建官网提供了两个方法：
一种是快速搭建的CND引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>，
另一种是NPM安装，NPM是node.js的包管理系(node.js是服务器端的JavaScript运行环境）

wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz  //下载nodejs (node.js已经包括了node,npm等指令)
tar xf node-v10.9.0-linux-x64.tar.xz ;cd node-v10.9.0-linux-x64/ 
./bin/node -v ；./bin/npm -v //查看版本
//将二进制文件链接到/usr/local/bin目录下
npm install --global vue-cli  //全局安装vue-cli
vue init webpack my-project  //创建一个基于webpack模板项目
cd my-project ; npm install ; npm run dev //安装依赖 运行....

·
然后网页打开你的localhost:8080,你就能看到vue.js的大大loge，说明vue脚手架你已经成功搭建并启动起来了。但是前期学vue的话，更加推荐通过第一种方式来学习，这样的话就不需要去了解通过npm方式搭建起来的目录结构和配置文件，只需要关注vue的核心知识即可，接下来就来用实例带大家学习下基础知识。
创建vue对象
先创建一个基础的页面，然后导入,然后在js中创建一个vue实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    	{
  { message }}
    </div>

最低0.47元/天解锁文章

Best she。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js简明教程

vue.js是干嘛的？vue.js就是一个上手简单，功能强大的框架，使网页的前端开发更加高效，就像本人对前端一窍不通的能快速的搭建自己的网页：）快速搭建vue的搭建官网提供了两个方法：一种是快速搭建的CND引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>，另一种是NPM安装，NPM是node.js的包管理系(node.js是服务器端的JavaScript运行环境）wget http
复制链接

扫一扫