脚手架的准备和分析

脚手架准备

安装@vue/cli全局模块包, 得到Vue命令, 以后创建Vue脚手架项目

步骤 

全局安装@vue/cli模块包

yarn global add @vue/cli
# OR
npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c

1·停止重新来

2·换一个网继续重来

查看Vue命令版本

vue -V

总结: 如果出现版本号就安装成功, 否则失败

脚手架-创建项目-启动服务

用Vue命令, 创建一个脚手架项目, 并启动webpack开发服务器

步骤

1 、创建项目

==注意: 项目名不能带大写字母, 中文和特殊符号==

# vue和create是命令, vuecli-demo是自己的文件夹名
vue create vuecli-demo

2、选择模块

==可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来==

 3、选           择             包                      管             理               器

 4、等待下载脚手架项目, 需要的依赖包(<.<喝点水, 等会老铁)

 5、终端切换脚手架项目下, 启动内置的==webpack热更新开发服务器==

cd vuecil-demo

yarn serve
# 或 npm run serve

 6、只要看到绿色的 - 啊. 你成功了

7、在浏览器中输入 地址

 脚手架目录分析

 vuecil-demo         # 项目目录
    ├── 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      – 依赖包列表文件和自定义命令

 脚手架代码和结构分析

如图所示, 一切从main.js开始, 到index.html结束

 main.js和App.vue以及index.html作用和关系

main.js - 项目打包入口 - Vue初始化
    App.vue - Vue页面入口
    index.html - 浏览器运行的文件
    App.vue => main.js => index.html

脚手架-自定义配置

配置文件叫vue.config.js

src并列处, 新建vue.config.js

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

 

脚手架-eslint了解

eslint是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格 

例子：先在main.js 随便声明个变量, 但是不要使用

 运行后观察发现, 终端和页面都报错了

==这样的错误, 证明eslint发现你代码不严谨==

 

解决 

方式1: 手动解决掉错误, 以后项目中会讲如何自动解决

方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务

总结： 

1、@vue/cli是什么?

全局模块包, 安装后得到Vue命令

2、如何创建脚手架项目?

vue create 项目名, 得到一套标准文件夹+文件+webpack环境

3、脚手架项目如何启动?

yarn server启动, 内置了webpack-dev-server, 得到一个地址和端口浏览器webpack打包后网页

4、脚手架项目好处?

开箱即用, 配置好的一套环境, 快速开发自己项目

5、脚手架项目入口有哪些?   

• main.js - webpack打包入口
• App.vue - Vue页面入口
• index.html - 网页入口

6、单Vue文件的好处?       

• 独立作用域,作用域互不影响
• style配合scoped, 样式针对当前页面标签生效, 互不影响