Vue-cli 脚手架

肌肉记忆敲代码
211 阅读4分钟

vuecli

        vuecli 是 vue 官方提供的一个全局模块包(通过命令工具行来使用),用来快速创建一个脚手架项目。

  • 基于 webpack
  • 开箱即用,零配置

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

  • 脚手架工程就是一套固定的文件夹 + 文件 + 配置的工程,我们在此基础上开发业务
  • 在开发过程中,脚手架工具是有用的,开发完成 (项目上线生产环境),它就没用了

image.png

好处和能力

  • 统一的项目解构(文件夹 + 文件 + 配置代码)

  • 开发过程中的 webpack个系列支持

    • babel 支持
    • eslint 约束语法风格 (代码风格)
    • 样式预处理器 less
    • vue 单文件支持

  • 提供一个开发是服务器,预览代码 (预览项目)

    • 自动刷新,方便预览
    • 热更新(只刷新修改的部分)

  • 基于 nodejs 的命令行工具

安装 vue-cli

设置 npm 的淘宝镜像

    1   npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
    2   npm config get registry  #查看镜像地址

全局安装命令

        npm install -g @vue/cli

        注意: 注意: 如果半天没动静(95%都是网速问题), 可以ctrl + c 停止安装，换一个网络环境来继续重新安装。

检查是否安装成功

        在任意小黑窗中输入: vue --version 如果可以看见版本号,说明安装成功。

vue-cli 创建项目

1.创建项目

    1  # vue和create是命令, vuecli-demo是文件夹名
    2  vue create vuecli-demo

2.选择模板

        通过键盘的上下键选择合适的模板,如果选择错了,可以按下 ctrl + c 终止操作

image.png

3.回车安装依赖

        等待脚手架工作自动生成项目文件夹+文件，并下载必须的第三方包。

image.png

4.启动项目

        进入脚手架项目下,启动服务,查看效果

     1   cd vuecli-demo
     2
     3   npm run serve

image.png         打开浏览器输入上述地址

image.png

总结

        1.小黒窗中的 vue create 命令是由 @vue/cli 提供的。
        2.vue create 用来快速创建项目：会自动创建文件夹

初始项目目录结构

 1    vuecil-demo                   # 项目目录
 2       ├── node_modules           # 项目依赖的第三方包
 3       └── public                 # 静态文件目录
 4          ├── favicon.ico         # 浏览器小图标
 5          └── index.html          # 单页面的html文件(网页浏览的是它)
 6       ├── src                    # 业务文件夹=》写代码
 7          ├── assets              # 静态资源
 8              ── logo.png         # vue的logo图片
 9          ├── components          # 组件目录
10              └── HelloWorld.vue  # 欢迎页面vue代码文件 
11          ├── App.vue             # 整个应用的根组件
12          └── main.js             # 入口js文件
13        ├── package.json          # 描述项目及项目
14        ├── .gitignore            # git提交忽略配置
15        ├── babel.config.js       # babel配置 
16        ├── README.md             # 项目说明
17        └── package-lock.json     # 项目包版本锁定和下载地址\

代码运行基础

        webpack + webpackdevserve
        可以在 nodemoudels 中找到 webpack 相关的包

代码运行流程

        整套代码时基于 webpack 的

image.png

项目打包

        npm run build

小结:

        1. vue-cli使用vue 命令快速创建项目，它创建的每个项目都有相同的结构；         2. 它的运行机制是基于webpack的

vue-cli 覆盖 webpack 配置

        在项目根目录下新建 vue.config.js (和 src 同级) 补充 dev Server

image.png

        1    const { defineConfig } = require('@vue/cli-service')
        2    module.exports = defineConfig({
        3      transpileDependencies: true,
        4      devServer:{
        5        host: 'localhost',
        6        open: true,
        7        port: 3000
        8      },
        9      lintOnSave: false  //关闭eslint
       10    })

小结

        1. vuecli的项目中不能直接看到webpack的配置
        2. 可以创建vue.config.js来覆盖webpack的配置

vue单文件组件与组件化开发

.vue文件试单文件住建

  • 后缀名是 .vue
  • webpack 还会使用额外的 loader 来处理它
  • 一个 .vue 文件就是一个组件 (页面)
  • 整个项目(页面)就是由多个组件构成的

image.png

基本组成

由三个部分组成: template + script + style

  • template : 决定模块,类似于 .html
  • script： 代码逻辑,类似于 .js
  • style: 样式
        1        <template>
        2         <div class="box">
        3           我是html模板
        4          </div>
        5        </template>
        6        
        7        <script>
        8          // 我是js逻辑
        9          export default {
       10             data() {
       11               return {
       12                 // 定义变量，数据
       13               }
       14             }
       15          }
       16        </script>
       17        
       18        <style>
       19          /* 我是css样式 */
       20          .box {
       21            color:red
       22          }
       23        </style>
avatar
文章
阅读
粉丝