vue教程(vue-cli)–准备工作
前言
本文档适合学习完以下内容后学习
- html 熟练!!
- html5 掌握!!
- css 熟练!!
- css3掌握!!
- JavaScript–BOM部分掌握!!
- JavaScript–DOM部分掌握!!
------------------------------------------------------------------
其他内容了解更好,比如
- JavaScript应用部分
- Ajax
- jQuery
- node.js
环境搭建
- 环境安装
- 插件安装
- 快速书写习惯
环境安装
node环境安装==>>>点击跳转下载地址
vscode软件安装==>>点击跳转下载地址
vue-cli安装
在win+r中输入cmd打开控制台
npm install -g @vue/cli
插件安装
ctrl+shift+x打开拓展工具直接搜索名字下载即可
按照这个教程推荐的来即可(我大部分都安装了哈哈哈)推荐教程
快速书写习惯
学会了这些技巧绝对效率翻倍
- 比如创建一个类名head的div , 直接就可以输入.head回车即可
- 输入标签时直接输入标签名回车即可,比如 div 回车
- 当要创建多个相同标签时候可以这样 div*3 回车
- 可以设置一个代码格式化快捷键,书写经常格式化
- ctrl+cv复制粘贴应该不用说了,x是剪贴,z是退回
- 选中内容后ctrl+d可以查找下一个该内容片断
- 选中内容后ctrl+f可以搜索内容
- vue中直接空白输入vue即可创建模板
- 书写样式时候不用输入完整名,比如background-color只需要输入bgc即可提示
- 还有很多暂时想不起来的后面继续补充…
了解Vue
创建vue项目
选择进入一个文件夹,地址栏输入cmd回车.创建项目详情看我博客==>>>查看
首先需要了解一下关键的vue目录结构
├── node_modules 这是一大堆插件包 不需要管他
├── public
│ ├── favicon.ico 网站图标(ico格式)
│ ├── index.html vue编译的根页面(一般不操作,只是修改或者引入东西)
├── src 项目源码目录
│ ├── assets 资源目录--放一些图片啊,字体啊,公用css啊等等都行
│ │ └── images
│ │ └── logo.png
│ ├── components 组件目录
│ │ └── title.vue
│ ├── routes 前端路由模块
│ │ └── index.js
│ ├── store vuex模块
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
│ ├── main.js 入口js文件
│ ├── app.vue 页面根组件
├── package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
//其他的没说到学到后面自己了解一下即可
vue文件熟悉
为什么要先说流程呢?因为使用vuecli脚手架开发就不是单纯的html页面了,了解文件可以帮助理解
- 脚手架开发可以使用大量的第三方包帮助开发.vscode中ctrl+~即可打开控制台
- vue的运行首先进入到app.vue页面中
- 一个vue页面有三个部分,template相当于html部分,style是css部分,script是js部分
- 一个vue页面template只能有一个