vue-cli 开发环境的搭建

最新推荐文章于 2025-05-20 17:51:25 发布

原创最新推荐文章于 2025-05-20 17:51:25 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-cli #创建项目

前端开发专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何使用 Vue CLI 创建 Vue 项目，包括安装、配置及使用 vue-loader 处理 *.vue 文件。同时，讲解如何在项目中使用 less、添加 scoped 样式以及在组件中正确使用 template。此外，还涉及了如何安装和使用自定义插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli

安装

npm i -g @vue/cli

vue-cli 的作用

是用来快速生成vue项目的脚手架
这个项目脚手架 webpack 构建的，依赖 webpack 打包；

使用 vue-cli 创建一个项目

# vue create 项目名称
vue create gx-app

# 进入项目目录
cd gx-app

# 启动项目
npm run serve

vue-cli 创建项目的模式

创建项目的模式有两种

default（默认）
自定义

vue-loader

vue-loader 会把一个 *.vue 的文件，编译成一个js对象；
它用于处理 vue文件

<template> 会被vue 的 render函数直接渲染；

<template></template>

<script> 部分，里面用es6 export default 导出的对象会被直接合并到上面的 <template>，然后生成一个组件对象；

<script></script>

<style> 部分，会被直接生成为 css的样式，添加到页面的<head> 里；

<style></style>

Google浏览器中的 vue 调试工具

首先要能访问 google 的应用商店；
Vue.js devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=chrome-ntp-icon

在这里插入图片描述

工具 vs code

插件安装：扩展商店搜索 vue，前两个都要安装
在这里插入图片描述
在 .vue 文件中，快速生成结构
vbase

使用less

vue-cli 中的 less 是已经配置好的，要使用 less 的话，安装一下 loader 就好了；

# 安装 less loader
npm i less-loader

# 安装 less 并添加到依赖中
npm i less -D

然后在 .vue 文件的样式标签上添加 lang属性就好了

<style lang="less" scoped>
...
</style>

scoped: 添加上这个属性，说明这个样式是局部作用；

在组件中使用 template

在组件中使用 template会报错，将导入的 vue 修改成 esm 版本的就好了；

【main.js】
import Vue from 'vue'
修改成：
import Vue from 'vue/dist/vue.esm'

插件

在 src 下新建 my-plugin/index.js 文件

export default {
    install(Vue, options) {

        // input组件
        Vue.component('gx-input', {
            template: `
            <div>
                <input type="text" />
            </div>
            `
        });

        // 过滤器 ...
    }
}

使用插件，在 vue 实例之前注册插件，就可以在实例中或者是组件中使用插件了，使用方法看插件是过滤器啊还是什么，按各自的方法使用；

【main.js】
// 导入插件
import myPlugin from './my-plugin/index'
// 注册插件
Vue.use(myPlugin)