一篇把vue准备工作说的明明白白的(奶妈级教程)
什么是Vue.js
Vue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明,Vue有着89%的开发者满意度。为了实现前后端分离的开发理念,开发前端 SPA(single page web application) 项目,实现数据绑定,路由配置,项目编译打包等一系列工作的技术框架。
Vue.js是一款流行的JavaScript前端框架,旨在更好地组织与简化Web开发。
Vue的核心是什么
vue脚手架是为了实现前后端分离的开发理念,开发前端 SPA(single page web application) 项目,实现数据绑定,路由配置,项目编译打包等一系列工作的技术框架。
VUE脚手架的安装:
1.node.js的安装:
参考网址:下载 | Node.js 中文网 (nodejs.cn)
2,初始化vue脚手架:
参考网址:Home | Vue CLI (vuejs.org)
步骤:
1.全局安装@vue/cli:
·将cmd用管理员权限打开
·配置国内npm淘宝镜像:npm config set registry https://registry.npm.taobao.org
·输入 npm install -g @vue/cli
·切换到你要创建项目的目录,命令创建项目(如:想要再桌面创建一个vue项目文件):
-cd Desktop
-Desktop > vue create XXX(文件名字)
创建之后会让你选择vue2或vue3
babel作用:将ES6的语法转换为ES5
eslint作用:进行语言检查
选择后回车,自动创建项目完成!
这时候回到我们桌面,会有一个刚才创建的vue项目的文件夹出现!
打开后内容如下:说明你创建成功了一个vue项目文件!
我们用vscode打开它(当然别的编译软件也可以,我比较习惯使用vscode)
用vscode的终端输入:npm run serve 会出现两个网址
第一个:供自己惊醒浏览
第二个:供局域网内所有人浏览
再打开页面之前我们还需要再浏览器中安装一个扩展工具(Vue.js devtools)可以在Chrome 应用商店的扩展中找的:
安装后打开vue项目是会出现如下:
亮着的一个vue标!
我们ctrl+鼠标左键单击后出现页面如下:
这是vue自动帮我们生成的基础页面
这时候我们打开我们的开发者工具如下:
再你的vue中出现helloworld,说明你的一切准备工作都做好了!
相关文章
- Vue之条件判断
- Vue之Router(二)
- vue入门教程(一)「建议收藏」
- Vue(3)webstorm代码格式规范设置与vue模板配置
- vue的mixins的使用[通俗易懂]
- Vue组件基础知识点
- Vue响应式依赖收集原理分析-vue高级必备
- Vue 动画与脚手架
- VUE组件封装_vue使用组件
- 开心档之Vue教程2
- 开心档之Vue教程1
- 【黄啊码】PHP结合vue导出excel乱码
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- Vue的异步更新实现原理是怎样的?
- 前端一面必会vue面试题1
- 开心档之Vue教程4
- Django+Vue前后端分离项目的部署详解编程语言
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- Vue用Redis储存获取数据(vue获取redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- Vue结合Redis实现性能优化(vue引入redis)
- Vue中触发Redis订阅通知(vue中订阅redis)