Vue CLI资料详解：新手入门指南

概述

本文全面介绍了Vue CLI资料，包括Vue CLI的定义、作用和优点，详细说明了如何安装和配置Vue CLI，并提供了创建和管理Vue项目的基本步骤和命令。

Vue CLI简介 什么是Vue CLI

Vue CLI是Vue.js官方提供的脚手架工具，用于快速搭建Vue.js项目。通过使用Vue CLI，开发者可以更加快速地创建和配置Vue.js项目，无需手动设置开发环境，从而提高开发效率。

Vue CLI是一个命令行工具，它提供了丰富的配置选项，使得开发者可以灵活地定制项目的开发环境和构建配置。

Vue CLI的作用和优点

1. 快速搭建项目：Vue CLI提供了预设的项目结构和配置，使得开发者可以迅速开始编码，而不需要花费时间去手动生成项目文件和配置。
2. 统一的开发环境：通过Vue CLI创建的项目拥有统一的结构和配置，有助于团队成员之间的代码协同工作。
3. 灵活的配置：Vue CLI允许开发者通过配置文件（如vue.config.js）自定义项目的构建选项，包括但不限于代码压缩、资源文件路径、打包输出位置等。
4. 内置的开发工具：Vue CLI集成了热重载等开发工具，使得开发者在开发过程中可以快速查看代码修改的效果，提高了开发体验。
5. 支持路由和状态管理：Vue CLI提供了集成路由和状态管理库（如Vue Router和Vuex）的选项，便于开发者构建复杂的单页面应用。

如何安装Vue CLI

安装Vue CLI需要先安装Node.js。确保Node.js已安装后，可以通过npm或yarn来安装Vue CLI。

npm install -g @vue/cli

或者使用yarn：

yarn global add @vue/cli

安装完成后，可以通过命令行输入vue --version来检查Vue CLI是否安装成功。

vue --version

创建Vue项目 使用Vue CLI快速创建项目

使用Vue CLI安装Vue项目非常简单，只需要运行以下命令：

vue create my-project

这个命令会创建一个名为my-project的新Vue项目，同时询问你项目的基本配置。你可以选择预设的配置或者手动选择特性，比如是否使用Vue Router、Vuex等。

项目目录结构解析

创建的项目目录结构如下：

my-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
└── src/
    ├── assets/
    ├── components/
    ├── App.vue
    ├── main.js
    └── router/
        └── index.js

• node_modules/：存放项目需要的所有依赖库。
• public/：存放静态文件，如图片、HTML模板等。
• src/：存放项目的源代码。
  • assets/：存放静态资源，如图片、字体文件。
  • components/：存放Vue组件。
  • App.vue：定义了应用的根组件。
  • main.js：项目入口文件，负责实例化Vue应用。
  • router/：存放路由配置文件。

配置项目的基本设置

在项目的根目录下，存在一个vue.config.js文件，用于配置项目的构建属性。例如：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-project/' : '/',
  lintOnSave: false,
  configureWebpack: {
    devtool: 'source-map'
  }
}

• publicPath：定义了打包输出的静态资源路径。
• lintOnSave：是否在保存时进行代码规范检查。
• configureWebpack：用来配置Webpack，例如设置源码映射。

实例配置vue.config.js

假设需要在生产环境使用CDN引入公共库，可以这样配置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? 'https://cdn.example.com/' : '/',
  chainWebpack: config => {
    config.externals({
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex'
    })
  }
}

创建和管理Vue项目实例

创建一个新的Vue项目并配置Vue Router：

vue create my-router-project
cd my-router-project
npm run serve

在项目中配置Vue Router：

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

export default router

在主应用文件中引入并使用Vue Router：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

常用命令详解 常用的Vue CLI命令

• vue create：用于创建一个新的Vue项目。
• vue add：用于向现有项目中添加预设的插件或功能。
• vue ui：启动一个图形界面，用于管理Vue CLI项目。
• vue serve：用于本地开发环境运行Vue项目。
• vue build：用于构建Vue项目。

命令参数详解

每个命令都有不同的参数，例如vue serve命令，可以用以下参数进行配置：

• --open：在启动后自动打开浏览器。
• --port：指定服务监听的端口。
• --mode：指定开发模式，如development或production。

命令实操示例

创建Vue项目

vue create my-project

启动开发服务器

vue serve --open

构建项目

vue build --mode production

模板和插件 了解内置模板

Vue CLI提供了多种预设的模板，可以满足不同项目的需求。例如，可以选择是否使用Vue Router或Vuex。

选择预设模板

vue create my-project --preset=vuejs/vuetify

选择特性

在创建项目时，可以选择是否包含Vue Router、Vuex、CSS预处理器（如Sass、Less）等特性。

自定义模板

自定义模板需要创建一个新的预设文件，并通过vue create命令使用该预设文件。

例如，创建一个名为my-custom-template的预设文件，内容如下：

{
  "presets": ["vuejs/vue-cli"]
}

创建项目时使用该预设：

vue create my-project --preset=my-custom-template

自定义插件

创建一个自定义插件，可以使用vue add命令安装：

vue add my-custom-plugin

路由和状态管理 基本路由配置

Vue Router是Vue官方提供的路由管理库，用于处理前端路由。路由的基本配置包括定义路由规则、视图组件的映射等。

定义路由规则

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

export default router

使用路由

在main.js中，引入并使用刚才定义的路由：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

使用Vue Router进行导航

通过Vue Router，我们可以使用router-link组件在不同页面之间导航，或者使用router.push方法进行编程式导航。

路由跳转

在模板中，使用router-link进行导航：

<router-link to="/home">Home</router-link>

在JavaScript中，使用编程式导航：

this.$router.push('/about')

Vuex状态管理简介

Vuex是Vue.js的状态管理库，帮助集中管理和同步应用程序的状态。Vuex由几个关键概念组成：Store、State、Getters、Actions、Mutations。

Store

Store是Vuex的核心，存放应用程序的状态。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

export default store

使用Store

在Vue组件里使用Store中的状态和方法：

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

项目构建与部署 构建项目

Vue CLI提供了vue build命令来构建项目。构建项目会根据配置生成生产环境的静态文件。

vue build

构建选项配置

通过vue.config.js文件可以配置构建选项。例如，配置公共路径：

module.exports = {
  publicPath: '/app/'
}

部署到服务器

构建后，会在项目的根目录生成一个dist文件夹，内含所有需要部署到服务器上的静态文件。

将dist文件夹中的内容上传到服务器，可以通过FTP、SCP等方式完成。

Nginx配置示例

server {
  listen 80;
  server_name mydomain.com;

  location / {
    root /path/to/dist/;
    try_files $uri $uri/ /index.html;
  }
}

Apache配置示例

<VirtualHost *:80>
  ServerName mydomain.com
  DocumentRoot /path/to/dist/

  <Directory /path/to/dist/>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  RewriteEngine on
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]
  RewriteRule ^ /index.html [L]
</VirtualHost>

以上是使用Vue CLI创建、配置和部署Vue.js项目的详细介绍，希望对你有所帮助。