vue的配置环境变量

大家好,我是大帅子,今天给大家讲一下vue的配置环境变量,今天给一些想学vue的新人配置一下环境变量,跟写vue代码前的一些必要的配置,下面我们直接开始吧,

---

1. 必须安装vue-devtools,我们可以在谷歌的商店搜索

我们为什么要学vue?

学习vue, 用更少的时间干更多的活

1.速度对比

2. 例如: 把数组数据-循环铺设到li中, 看看分别如何做的?

• 原生js做法

• Vue.js做法

{{item}}
 

注意:虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js

.脚手架-介绍

目标

webpack自己配置环境繁琐

官方提供脚手架, 快速搭建项目基础结构

概念

脚手架是为了保证各施工过程顺利进行而搭设的工作平台

在代码里的体现, 就是一套固定标准的, 文件夹+文件+webpack配置

好处

• 开箱即用
• 0配置webpack
• babel支持
• css, less支持
• 开发服务器支持

5.脚手架-准备

目标

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

步骤

1… 全局安装@vue/cli模块包

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

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

• 停止重新来
• 换一个网继续重来

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      – 依赖包列表文件和自定义命令 

脚手架-自定义配置

目标

脚手架内置的webpack, 如何修改配置

步骤

配置文件叫vue.config.js

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

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

脚手架-eslint了解

目标

脚手架内置代码检查工具, 什么是eslint

解释

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

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

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

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

解决

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

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

module.exports = {
lintOnSave:false  //关闭eslint检查
} 

脚手架-单vue文件

目标

掌握vue文件, 使用规则和特点

讲解

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

​


​


​ 

为了检测一下大家学的如何,我下面出几道题大家会不会

@vue/cli是什么?

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

如何创建脚手架项目?

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

脚手架项目如何启动?

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

脚手架项目好处?

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

脚手架项目入口有哪些?

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

单Vue文件的好处?

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

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
---->        还需努力!大家一起进步!!!