Vue基本概念

vue是什么

vue是一套构建用户界面的渐进式框架

官网地址: cn.vuejs.org/ (作者: 尤雨溪)
渐进式：按需集成更多的功能；
框架：拥有自己的一套规则的语法，比库强大的多（例Vue）；
库：封装的属性和方法（例jQuery）

为什么使用

开发高效快速
市场需求，企业开发都在使用
前端工程师必备技能，高薪

@vue/cli脚手架

使用脚手架原因：webpack自己配置环境很麻烦, 每下载一个包需逐个配置

@vue/cli 脚手架介绍介绍

@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包为了保证各施工过程顺利进行而搭设的工作平台

1、 @vue/cli安装

全局安装命令

yarn global add @vue/cli 或npm install -g @vue/cli

查看`vue`脚手架版本

vue -V

2. @vue/cli 创建项目启动服务

创建项目

vue create是命令，vuecli-demo文件/项目名，注意文件/项目名不能带大写字母, 中文和特殊符号

vue create vuecli-demo

选择模板

window+R-->输入cmd 打开下方黑色面板

可以上下箭头选择, 弄错了ctrl+c重来

选择下载脚手架项目依赖包的方式

回车等待生成项目文件夹+文件+下载必须的第三方包们

命令运行到此后，进入面板输入以下两行命令，启动内置的热更新本地服务器

cd vuecil-demo

yarn serveh 或 npm run serve

成功状态--绿色

在浏览器输入面板上local的地址：http://localhost:8080 ,即可看到以下页面，表示 @vue/cli脚手架安装成功总结: vue命令创建工程目录, 项目内置webpack本地热更新服务器, 帮我们打包项目预览项目

@vue/cli 目录和代码分析

  ├── node_modules # 项目依赖的第三方包

  ├── public       # 静态文件目录

    ├── favicon.ico# 浏览器小图标

    └── index.html # 单页面的html文件(网页浏览的是它)

  ├── src          # 业务文件夹

    ├── assets     # 静态资源

      └── logo.png # vue的logo图片

    ├── components # 组件目录

      └── HelloWorld.vue # 欢迎页面vue代码文件

    ├── App.vue    # 整个应用的根组件

    └── main.js    # 入口js文件

  ├── .gitignore   # git提交忽略配置

  ├── babel.config.js  # babel配置

  ├── package.json  # 依赖包列表

  ├── README.md    # 项目说明

└── yarn.lock # 项目包版本锁定和缓存地址

主要文件及含义

node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件

@vue/cli 自定义配置

`/* 覆盖webpack的配置 */

module.exports = { devServer: { // 自定义服务配置 open: true, // 自动打开浏览器 port: 3000 } }`

eslint了解

eslint是代码检查工具，违反规定就报错 如何eslint暂时关闭? 在vue.config.js中设置lintOnSave：false重启服务器即可

单vue文件

Vue推荐采用.vue文件来开发项目
template里只能有一个根标签
vue文件-独立模块-作用域互不影响
style配合scoped属性, 保证样式只针对当前template内标签生效
vue文件配合webpack, 把他们打包起来插入到index.html

Vue基础@vue/cli脚手架