vue教程(vue-cli)--准备工作--学习记录(一)

vue教程(vue-cli)–准备工作

前言

本文档适合学习完以下内容后学习

1. html 熟练!!
2. html5 掌握!!
3. css 熟练!!
4. css3掌握!!
5. JavaScript–BOM部分掌握!!
6. JavaScript–DOM部分掌握!!

------------------------------------------------------------------

其他内容了解更好,比如

1. JavaScript应用部分
2. Ajax
3. jQuery
4. node.js

环境搭建

1. 环境安装
2. 插件安装
3. 快速书写习惯

---

环境安装

node环境安装==>>>点击跳转下载地址
vscode软件安装==>>点击跳转下载地址
vue-cli安装
在win+r中输入cmd打开控制台
npm install -g @vue/cli

---

插件安装

ctrl+shift+x打开拓展工具直接搜索名字下载即可
按照这个教程推荐的来即可(我大部分都安装了哈哈哈)推荐教程

---

快速书写习惯

学会了这些技巧绝对效率翻倍

1. 比如创建一个类名head的div , 直接就可以输入.head回车即可
2. 输入标签时直接输入标签名回车即可,比如 div 回车
3. 当要创建多个相同标签时候可以这样 div*3 回车
4. 可以设置一个代码格式化快捷键,书写经常格式化
5. ctrl+cv复制粘贴应该不用说了,x是剪贴,z是退回
6. 选中内容后ctrl+d可以查找下一个该内容片断
7. 选中内容后ctrl+f可以搜索内容
8. vue中直接空白输入vue即可创建模板
9. 书写样式时候不用输入完整名,比如background-color只需要输入bgc即可提示
10. 还有很多暂时想不起来的后面继续补充…

了解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页面了,了解文件可以帮助理解

1. 脚手架开发可以使用大量的第三方包帮助开发.vscode中ctrl+～即可打开控制台
2. vue的运行首先进入到app.vue页面中
3. 一个vue页面有三个部分,template相当于html部分,style是css部分,script是js部分
4. 一个vue页面template只能有一个