光速掌握Vue Cli

顾伊
315 阅读6分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

Vue Cli官网：cli.vuejs.org/zh/guide/

  • 1.组件本质：一个自定义的标签

    • 普通标签：只有html结构
    • 组件：有html结构，css样式，js业务逻辑

  • 2.组件作用：复用.把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护

    • 一个组件相当于一个vue实例

单文件组件

  • 1.单文件组件 ： 把每一个组件放到一个独立的文件里

    • 好处：

    • (1)便于维护

    • (2)便于复用

      • 当一个页面非常复杂的时候，我们需要把所有的结构都写在一个html中，非常的不便于维护
      • vue提供了一个专业的工具来帮我们将每一个组件放到一个独立的文件中管理

  • 2.组件文件的后缀名是.vue文件

  • 3.这个.vue文件主要由三个部分组成

    • template

      • 这里写组件的HTML结构模板

    • script

      • 这里写组件的js业务逻辑。组件中的data、methods、计算属性，声明周期钩子等都写在这里

    • style

      • 这里写组件的css样式

  • 4.小提示 ： 快速生成组件三大部分的快捷键:<vue>

Vue cli工具安装

1.在任何位置打开终端小黑窗，输入命令

  • npm install -g @vue/cli

2.如果安装失败，例如下图所示。解决方案如下

  • 一般是由于网速较慢下载到一半导致中断，多试几次即可

  • (1)清除npm缓存，再重新安装

    • 清除缓存命令:npm cache clean -f

  • (2)检查有没有安装成功:vue --version

vue cli脚手架使用教程

  • 1.默认情况下，浏览器只能识别html,css,js后缀文件，无法识别 .vue后缀文件，所以要想让浏览器识别.vue后缀文件，我们需要借助一些插件来帮我们将.vue文件转成浏览器可以识别的html文件

    • 类似于我们以前学习的less，需要借助插件Easy LESS先转成css文件浏览器才可以识别

  • 2.脚手架作用

    • (1)生成规范的vue项目目录
    • (2)底层基于webpack, 将后缀名为 .vue 的文件 编译成浏览器可以识别的 html文件

Vue脚手架安装流程

  • 脚手架 ：指的是一个项目的目录结构

    • a. 我们以前写项目的时候，会把js文件放到js文件夹，css文件放到css文件夹，图片文件可能放在images文件夹，也可能放在imgs文件夹。第三方框架可能放在libs文件夹，也有可能放在js文件夹

      • 尽管在vue之前，我们已经有这种项目文件夹命名规范的意识，但是无法避免会有一些差异

    • b. 有了脚手架之后，可以一键帮我们生成项目统一的目录结构，我们只需要写页面逻辑，而无需为了取名而烦恼。

  • vue-cli生成脚手架官网文档传送门：cli.vuejs.org/zh/guide/cr…

1.创建vue项目 ：vue create 项目名称

  • a. 在哪里打开黑窗，就在哪里创建项目

    • 例如，我这里cd到day06文件夹，所以就在这个文件夹创建vue项目

  • b.项目名称不要有中文，也不要有大写字母

    • 错误名称: vue create 组件
    • 错误名称: vue create Components
    • 正确名称: vue create 01-components

  • c.最好使用系统自带终端打开，千万不要使用git bash！

2.选择默认配置

3.成功提示

  • 4.运行项目的命令的位置是项目根目录，与package.json文件同级

    • npm run serve
    • 终端开启之后不要关闭，此时我们修改代码无需重新运行，浏览器会自动刷新
 vuecil-demo         # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网站首页，vue会帮我们配置好，使用较少)
    ├── src          # 业务文件夹(项目核心文件夹，我们写的项目代码都放在这个文件夹里面)
      ├── assets     # 静态资源（一般项目图片、css都放在这里）
        └── logo.png # vue的logo图片(没啥用,vue打广告的，可删除)
      ├── components # 组件目录一般我们写的组件都放在这里）
        └── HelloWorld.vue # 欢迎页面vue代码文件 （打广告的，可删除）
      ├── App.vue    # 整个应用的根组件（网站首页index.htm默认会渲染这个根组件）
      └── main.js    # 入口js文件（入口文件，vue实例的创建，根组件的挂载都是在这里完成）
    ├── .gitignore   # git提交忽略配置（默认已经帮我们配置好 ）
    ├── babel.config.js  # babel配置（ES6转换ES5工具，一般不用管）
    ├── package.json # 依赖包列表
    ├── README.md    # 项目说明（一般公司代码规范，人员组成之类的可以写在这里）
	└── package-lock.json    # 项目包版本锁定和缓存地址
	└── vue.config.js    # 项目webpack配置项

main.js 入口文件说明

//1.导入vue框架
import Vue from 'vue'
//2.导入App.vue根组件
import App from './App.vue'
//3.控制台打印提示开关
Vue.config.productionTip = false
//4.创建vue实例
new Vue({
  //默认渲染App.vue组件(根组件)
  render: h => h(App),
}).$mount('#app')//设置挂载点,相当于 el:'#app'

脚手架准备工作：清理欢迎界面与自定义配置

1.关闭eslint插件(推荐)

  • eslint是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格
  • 这个插件对代码格式要求很严格， 比如不能随便写分号、代码缩进要规范等等。 对初学者不是很友好，建议关闭
module.exports = {
    // 关闭eslint代码检查
    lintOnSave: false
}

2.修改服务器端口号

脚手架内置的webpack, 配置文件叫vue.config.js

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

3.删除conponents文件夹下的默认介绍组件, 删除App.vue中所有代码

安装插件可以格式化ESLint支持的代码风格

配置方式-js:

  1. 任意的.js文件鼠标右键格式化文档的方式
  2. 在弹出的窗口中选择配置默认格式化程序
  3. 选择Pretties-Standard - JavaScript formatter
  4. 这样.js文件的格式化程序就配置完毕

配置方式-vue:

  1. 任意的.vue文件鼠标右键格式化文档的方式
  2. 在弹出的窗口中选择配置默认格式化程序
  3. 选择Pretties-Standard - JavaScript formatter
  4. 这样.vue文件的格式化程序就配置完毕

vue ui创建脚手架

vue ui作用：图形化页面创建项目。

  • 创建的目录跟刚才一致，只不过用这个不需要自己敲命令行。

1.打开电脑终端，输入命令：vue ui

2.在图形化页面选择vue项目管理器

3.创建项目

4.输入项目名称

5.手动配值选项

6.选择代码规范

7.开始创建

最后运行

wallhaven-579x18.jpg

avatar
文章
阅读
粉丝