一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。
大家好,我是大帅子,今天给大家讲一下vue的配置环境变量,今天给一些想学vue的新人配置一下环境变量,跟写vue代码前的一些必要的配置,下面我们直接开始吧,
1. 必须安装vue-devtools,我们可以在谷歌的商店搜索
我们为什么要学vue?
学习vue, 用更少的时间干更多的活
1.速度对比
2. 例如: 把数组数据-循环铺设到li中, 看看分别如何做的?
- 原生js做法
<ul id="myUl"></ul>
<script>
let arr = ["春天", "夏天", "秋天", "冬天"];
let myUl = document.getElementById("myUl");
for (let i = 0; i < arr.length; i++) {
let theLi = document.createElement("li");
theLi.innerHTML = arr[i];
myUl.appendChild(theLi);
}
</script>
- Vue.js做法
<li v-for="item in arr">{{item}}</li>
<script>
new Vue({
// ...
data: {
arr: ["春天", "夏天", "秋天", "冬天"]
}
})
</script>
注意:虽然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
- 停止重新来
- 换一个网继续重来
- 查看
Vue命令版本
vue -V
总结: 如果出现版本号就安装成功, 否则失败
脚手架-创建项目-启动服务
目标
用Vue命令, 创建一个脚手架项目, 并启动webpack开发服务器
步骤
-
创建项目
==注意: 项目名不能带大写字母, 中文和特殊符号==
# vue和create是命令, vuecli-demo是自己的文件夹名
vue create vuecli-demo
-
选择模板
==可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来==
- 选择包管理器
- 等待下载脚手架项目, 需要的依赖包(<.<喝点水, 等会老铁)
- 终端切换脚手架项目下, 启动内置的==webpack热更新开发服务器==
cd vuecil-demo
yarn serve
# 或 npm run serve
- 只要看到绿色的 - 啊. 你成功了
- 开心的 - 浏览器中 - 输入上述地址
脚手架-目录分析
目标
了解目录作用, 基于它开发自己项目
讲解
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是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格
- 例子: 先在main.js 随便声明个变量, 但是不要使用
- 运行后观察发现, 终端和页面都报错了
==这样的错误, 证明eslint发现你代码不严谨==
解决
方式1: 手动解决掉错误, 以后项目中会讲如何自动解决
方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务
module.exports = {
lintOnSave:false //关闭eslint检查
}
脚手架-单vue文件
目标
掌握vue文件, 使用规则和特点
讲解
- template里只能有一个根标签
- vue文件-独立模块-作用域互不影响
- style配合scoped属性, 保证样式只针对当前template内标签生效
- vue文件配合webpack, 把他们打包起来插入到index.html
<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
<div>欢迎使用vue</div>
</template>
<!-- js相关 -->
<script>
export default {
name: 'App'
}
</script>
<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>
为了检测一下大家学的如何,我下面出几道题大家会不会
@vue/cli是什么?
- 全局模块包, 安装后得到Vue命令
如何创建脚手架项目?
- vue create 项目名, 得到一套标准文件夹+文件+webpack环境
脚手架项目如何启动?
- yarn server启动, 内置了webpack-dev-server, 得到一个地址和端口浏览器webpack打包后网页
脚手架项目好处?
- 开箱即用, 配置好的一套环境, 快速开发自己项目
脚手架项目入口有哪些?
- main.js - webpack打包入口
- App.vue - Vue页面入口
- index.html - 网页入口
单Vue文件的好处?
- 独立作用域,作用域互不影响
- style配合scoped, 样式针对当前页面标签生效, 互不影响
好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅 还需努力!大家一起进步!!!
