园龄：3年7个月粉丝：6 关注：3

📂Vue框架

🔖Vue框架

2022-11-15 22:00阅读: 37评论: 0推荐: 0

【第17章】精通Vue CLI

精通Vue CLI

脚手架致力于将Vue生态中的工具基础标准化，确保各种构建工具能够基于智能的默认配置平稳地衔接，这样开发者可以专注于开发应用的核心业务上，而不必花时间去纠结配置的问题。

一、脚手架的组件

Vue CLI有几个独立的部分——分别为CLI、CLI服务和CLI插件。

CLI

CLI(@vue/cli)是一个全局安装的NPM包，提供了终端里的Vue命令。

可以通过vue create命令快速创建一个新项目的脚手架，或者直接通过vue serve命令构建新项目的原型，还可以使用vue ui命令通过一套图形化界面管理所有项目。

CLI服务

CLI服务(@vue/cli-service)是一个开发环境依赖。它是一个NPM包，局部安装在每个@vue/cli创建的项目中。

CLI服务构建于webpack和webpack-dev-server之上，包含如下内容：

加载其他CLI插件的核心服务
一个针对绝大部分应用优化过的内部的webpack配置
项目内部的vue-cli-service命令，提供serve、build和inspect命令

CLI插件

CLI插件是向Vue项目提供可选功能的NPM包，Vue CLI插件的名字以@vue/cli-plugin-(内建插件)或vue-cli-plugin-(社区插件)开头，容易使用。在项目内部运行vue-cli-serve命令时，它会自动解析并加载package.json中列出的所有CLI插件。

二、脚手架环境搭建

新版本的脚手架名称由vue-cli改成了@vue/cli。

如果已经全局安装了旧版本的vue-cli(1.x或2.x)，需要通过npm uninstall vue-cli -g卸载它

Vue CLI需要Node.js 8.9或更高版本，下载好后，在终端输入node -v查看是否安装成功

三、安装脚手架

全局安装：npm install -g @vue/cli

安装之后，使用vue --version检查其版本是否正确(4.x)

脚手架环境已经配置完成。

四、创建项目

4.1 使用命令

例如在F盘创建wiki-web项目

Step 1：首先打开创建项目的路径。

Step 2：在DOS系统窗口中输入vue create wiki-web

紧接着会提示配置方式，包括Vue 2默认配置，Vue 3默认配置和手动配置，使用方向键选中Vue 3默认配置

注意：项目名称不能大写，否则无法创建。

选中Vue 3默认配置后，直接按Enter键，即可创建wiki-web项目。

项目创建完成。

cd wiki-web进入到项目中

使用脚手架提供的npm run serve命令启动项目

项目启动成功！！！会提供本地的测试域名，只需要在浏览器中输入"http://localhost:8080/"即可打开项目。

Ctrl + C关闭项目

4.2 使用图形化界面

除了使用命令行创建项目外，还可以通过vue ui命令，以图形化界面创建和管理项目。

现在需要在F盘创建第二个项目wiki-web2

按步骤创建即可。

五、分析脚手架项目结构

下面分析几个关键的文件：src文件夹下的App.vue和main.js文件、public文件夹下的index.html文件。

App.vue：是一个单文件组件，是所有组件的父组件，包含组件代码、模板代码和CSS样式规则

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js：是程序入口的JavaScript文件，主要用于加载各种公共组件和项目所需要用的各种插件，并创建Vue的根实例App.vue

import { createApp } from 'vue'  // 在Vue3.0新增Tree-shaking支持
import App from './App.vue'		// 导入App组件

createApp(App).mount('#app')  // 创建应用程序实例，加载应用程序实例的根组件

index.html：该文件为项目的主文件，里面包含一个id为app的div元素，根组件实例会自动挂载到该元素上面

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 <%= BASE_URL %>是public下的路径-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题 package.json中 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 如果浏览器不支持js时，noscript标签中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app">

    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

整个流程分析：

1. 执行npm run serve 随后来到src目录找到main.js，引入了vue，引入了app.vue
2. 找到app.vue，随后又去执行HelloWorld.vue
3. main.js中随后关闭vue的生产提示，创建vue实例对象，然后将app组件放入容器中
4. 最后找到index.html，放入app容器中

六、配置文件package.json

package.json是JSON格式的NPM配置文件，定义了项目中所需要的各种模块，以及项目信息。

{
  "name": "wiki-web",	// 项目文件的名称
  "version": "0.1.0",	// 项目版本
  "private": true,		// 项目是否私有
  "scripts": {		// 值是一个对象，其中设置了项目生命周期各个环节所需要执行的执行
    "serve": "vue-cli-service serve", // 执行 npm run serve，运行项目
    "build": "vue-cli-service build", // 执行 npm run build，构建项目
    "lint": "vue-cli-service lint" // 执行npm run lint，运行EXLint验证并格式化代码
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {	// 这里的依赖是用于开发环境的，不发布到生产环境
    "@vue/cli-plugin-babel": "~4.5.9",
    "@vue/cli-plugin-eslint": "~4.5.9",
    "@vue/cli-service": "~4.5.9",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

在只用NPM安装依赖的模块时，可以根据模块是否需要在生产环境下使用而选择附加-S或者-D参数。

等价于：

npm install element-ui -S
等价于
npm install element-ui -save

dependencies表示开发和上线都需要的第三方包，用-S

devdependencies表示仅在开发阶段需要的第三方包，用-D

上一篇【Vue-05】修改Vue的默认配置

下一篇第1章进入SpringBoot世界

本文作者：Ac_c0mpany丶

本文链接：https://www.cnblogs.com/keyongkang/p/16894179.html

posted @ 2022-11-15 22:00 Ac_c0mpany丶阅读(37) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

【第17章】精通Vue CLI

精通Vue CLI

一、脚手架的组件

CLI

CLI服务

CLI插件

二、脚手架环境搭建

三、安装脚手架

四、创建项目

4.1 使用命令

4.2 使用图形化界面

五、分析脚手架项目结构

六、配置文件package.json

公告

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论