vue进阶-vue-cli

不会叫的狼

已于 2023-08-08 10:55:48 修改

阅读量740

点赞数

分类专栏： Vue 文章标签： vue.js

于 2023-06-17 01:08:00 首次发布

本文链接：https://blog.csdn.net/weixin_40017062/article/details/131255848

版权

Vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

Vue-CLI是Vue.js的官方命令行工具，用于快速搭建Vue开发环境。通过npm全局安装不同版本的Vue脚手架，可以创建新项目。项目主要文件包括index.html、main.js和App.vue，分别作为入口页面、应用入口文件和根组件。Vue脚手架遵循特定的文件结构，方便管理和开发。项目打包后生成的dist文件夹包含编译后的资源。使用vetur插件可实现代码高亮。

摘要由CSDN通过智能技术生成

CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。

Vue-CLI是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。

vue项目相关文件以 .vue 为后缀，需要事先安装 Node 环境进行编译运行。

1. 创建Vue脚手架

1.1 安装

npm install -g @vue/cli          //安装的是最新版
npm install vue-cli@2.9.6        //指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本号
npm install -g @vue/cli@3.11.0   //指定版本安装【指定版本为3.0以上版本】，其中3.11.0为版本号

vue --version

全局安装 Vue 脚手架

1.2 版本号对应

📌 查看 Vue-CLI 版本：

> vue --version 或 vue -V

@vue/cli 5.0.8

Vue CLI 4.5 以下，对应的是 Vue2
Vue CLI 4.5 及以上，对应的是 Vue3
但是使用 vue init 创建项目的时候会有机会选择，可以选择 Vue2

📌 查看 vue 版本：

> npm list vue 

vue@3.3.4

1.2 创建Vue脚手架工程

vue create xxx项目名

注意：工程名字不能大写，驼峰命名使用 -，例如：my-app

1.3 启动工程

npm run serve

在这里插入图片描述

浏览器访问 http://localhost:8080/

在这里插入图片描述

这样vue脚手架工程就跑起来了，关闭为Ctrl+C

2. Vue脚手架的文件结构说明

在这里插入图片描述

index.html：

<!DOCTYPE html>
<html lang="">
  <head>
    ...
  </head>
  <body>
    ...
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

主页面：提供 id="app" 的 div 标签。

main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

入口文件：创建vue实例、挂载根组件。

App.vue：

<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>