vue-cli-3环境搭建和配置

本文介绍Vue单文件组件的特点与组成,并详细解析Vue CLI脚手架的安装与配置过程,帮助读者快速搭建Vue开发环境。

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

一、vue 是单文件组件


之前注册组件有什么缺点 ?

1- 缺乏语法高亮

2-格式不好

3-没有专门的写css代码等等

参考 : vue => 工具 => 单文件组件

什么是单文件组件 :后缀为 .vue 的文件

单文件组件的三个组成部分 (代码块 : scaffold 自动提示)

  • template (模板结构)

  • script 组件的代码逻辑

  • style 样式

注意点 :

  • 单文件组件,无法直接在浏览器中使用,必须经过 webpack 这种打包工具,处理后,才能在浏览器中使用

  • vue-loader 其他配置

二、脚手架简介


Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程

1. webpack

前端项目工程化的标志之一就是引入了『编译』环节,而 webpack 就是最常见、最常用的前端项目编译工具。

说明

如果作类比的话,那么 npm + webpack ≈ maven 。

但是 webpack 的使用十分繁琐,为了简化使用,前端各大框架(不仅仅是 vue)都提供了所谓的 “脚手架” 。通过 “脚手架” 对 webpack 进行包装,简化使用。

所以,我们是 “直接使用脚手架,间接使用 webpack” 去管理、编译我们的 web 前端项目源码。

2、脚手架介绍

a、vue-cli简介

  • vue-cli 是 vue 的脚手架工具

  • 作用 : vue-cli 提供了一条命令, 我们直接通过这条命令就可以快速的生成一个 vue 项目 (vue init XX) 。项目的基本结构、以及 webpack 配置项 全部配置 好了

  • 为什么会有脚手架工具 ???

    因为 webpack 配置繁琐, 阻止一批想用 vue 但是不会 webpack 的开发人员,所以作者直接将所有 vue 项目中用到的配置全部帮你写好了,这样,就不需要开发人员再去配置基础 webpack 配置项了

  • 也就是说,使用 vue-cli 这个脚手架工具后,再也不用担心 webpack 配置问题了, 我们前端只需要写 vue 代码, 来实现功能即可

b、安装vue-cli4

vue-cli 换过一次名字。在 3.0 之前叫 vue-cli ,从 3.0 开始更名位 @vue/cli 。现在是 4.x 版本。

建议使用 @vue/cli 而非 vue-cli ,毕竟 vue-cli 太久远了。

  • 删除已安装的 vue-cli
npm uninstall -g @vue/cli
  • 先安装淘宝镜  
npm config set registry https://registry.npm.taobao.org
  • 安装cli  
npm install -g @vue/cli

 

安装结束后,你可以通过 vue --versionvue -V 查看 vue-cli 的版本信息。

从 vue-cli 变更为 @vue/cli 时,对于它的使用(命令)也发生了变化。例如,创建项目的所使用的命令,以前是 vue init,后来就变为了 vue create

除了一些命令的改变,@vue/cli 还提供了一个 web 页面可用于创建项目。通过 vue ui 命令你可以启动这个内置的 web 服务在页面上创建 vue 项目。不过本质上和下面的命令行创建是一模一样的,要不要使用它随你

c、配置vue环境变量

把这个路径配到path里  

第一步:创建项目

使用如下命令开始创建 vue 项目(这里示例项目名为 vue-cli-demo ):  

vue create 项目名

 

  • 第一项和第二项( default ...)表示的是使用默认配置创建 vue 项目。

  • 第三项( Manually ...)表示手动对 vue 项目的各方面进行设置。我们选择第三项

    可以使用『上下方向键』来切换选项。

    提示:如果只需要 babel 和 eslint 支持,不需要其它任何功能,那么选择第一项,就完事了。不过,我们在学习过程中一般不会使用 eslint 。

  • 第二步

    在上一步选中第二项后,你会看到如下界面:

在这个界面中,去需要去选择你的 vue 项目所要用到的特性。在特性列表中,BabelLinter / Formatter 两项默认是选中的。

vue-cli 内置支持了 8 个功能特性,可以多选。使用『方向键』在特性选项之间切换,使用『空格键』选中当前特性,使用 a 键 切换选择所有,使用 i 键 翻转选项。

对于每一项的功能,此处做个简单描述:

Babel:支持使用 babel 做转义。
TypeScript:支持使用 TypeScript 书写源码。
Progressive Web App (PWA) Support PWA:支持。
Router:支持 vue-router。
Vuex:支持 vuex。
CSS Pre-processors:支持 CSS 预处理器。
Linter / Formatter:支持代码风格检查和格式化。
Unit Testing:支持单元测试。
E2E Testing: 支持 E2E 测试。 

 

对于我们(非前端开发工程师、Java 全栈开发工程师、Java 后端开发工程师)而言,BabelRouter 是必选的。VuexCSS Pre-processors 可能会用到

选择vue版本为2,不要选3,不要选3

第三步

如果在功能选择界面中选中了 Router,那么我们接下来会看到如下界面(如果功能界面没有选择 Router,就会跳过这个界面):

 

在这个界面中,vue-cli 在询问你,对于 Router 你是否以它的 history 模式使用它?默认值是 Yes

如果不使用 Router 的 history 模式,那自然就是 hash 模式。这里我们输入 n,表示使用 Router 的 hash 模式

第四步

在设置完你所要使用的各个功能的设置之后(例如,上面的 Router 的 history / hash 模式的设置), 我们会看到下面界面:

 

在这个界面中,vue-cli 是在询问你:是将所有的配置都放在 pacakge.json 一个文件中,还是将各个功能的配置分开存放在独立的文件中?

选择第一项:分开存放。

第五步

这是 vue-cli 创建 vue 项目的最后一个界面:

 

在这里,vue-cli 是在询问你:是否将你的这些设置保留下来作为默认的项目设置的模板。默认值是 N

我们输入 N ,或者直接按回车确认进入安装界面:

 

启动项目

在控制台中输入:npm run serve

 

三、项目结构说明


1、项目结构

 

项目目录说明:

#说明
node_modules 目录项目所依赖的包的存放目录(封装webpack 依赖包)
public 目录存放项目所需的静态资源文件目录
src 目录存放项目的源码文件的目录
babel.config.js 文件babel 配置文件
package.json 文件整个项目的配置文件
src/main.js 文件整个项目的入口文件,并且在这里引入全局使用的 .vue、.css 文件

2、src目录说明

  • assets 静态资源 (css、 js 、 image 、字体图标)

  • views 放置组件页面

  • components 放置组件页面中嵌套的组件

  • App.vue 根组件 => 指定路由出口

    • 脚手架之后,所有的组件都将渲染到 app.vue 中

  • app 中的 #app 还是 index.html 中的 #app, app.vue 中的会覆盖前者,可以通过分别添加 title 属性验证一下

  • <router-view/> 路由出口要写在 app.vue 组件模板中

  • main.js

    1. 入口 js 文件

    2. 作用 : 创建 vue 实例,导入其他组件并挂在到 vue 实例上

    3. Vue.config.productionTip = false 不要打印提示

    4. 检测 no new : 见后面的检测警告

new Vue({
  el: '#app', // 目标显示
  router,   // 挂载路由
  components: { App }, // 注册组件 App
  template: '<App/>' // 模板显示组件 app
})
  • route/index.js => 路由

  • 一定要记住 :Vue.use(Router) 模块化公工程中一定要安装路由插件 .js 就是一个模块

index.html是页面的入口文件,自动注入 ./src/main.js文件

3、单文件组件

vue-cli 创建的 vue 项目中,我们看到有一类后缀名为 .vue 的文件,我们称为『单文件组件』。

.vue 文件的概念的出现,是为了让我们以更友好更简便的方式编写 vue 代码。


至于如何将 .vue 文件『编译』成传统的、正常的、浏览器认识的 html 中嵌 js 和 css 的形式,这就是 vue-cli 背后的 webpack 所要负责处理的事情了 

单文件组件的组成结构分三部分:

  • template 组件的模板区域

  • script 业务逻辑区域

  • style 样式区域

例如:

<template>
  <!-- 这里用于定义 Vue 组件的模板内容 -->
</template>

<script>
  // 这里用于定义 Vue 组件的业务逻辑
  export default {
    data(){
    	return { // 私有数据
    	
    	} 
    }, 
    methods: {
    
    } // 处理函数
    ,created(){
    
    }
}
</script>

<style scoped>
  /* 这里用于定义组件的样式 */
</style>

每个组件都有自己独立的 html、js、css,互不干扰,真正做到可独立复用。

4、package.json 文件

vue 项目的核心配置文件 package.json 中已经配置了两个命令:

  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  ...
}

如果你是在 IDEA 中查看 package.json 文件的内容,你会发现这两行命令前各有一个代表运行的可点击的绿色三角形。

  • serve 是运行命令 。在开发过程中是我们最经常用到的命令。通过它能将 vue 项目运行起来,是我们能通过浏览器访问。

  • build 是编译命令 。是在开发结束后将项目源码编译、整合成最终的 html、js、css 等文件,这些文件会出现在项目的 dist 目录下

5、vue.config.js 文件

默认情况下通过 serve 命令运行项目会占用 8080 端口,如果想作出改变的话,可以在项目的根目录下(即,和 package.json 文件同级)创建一个名为 vue.config.js 的文件,并在其中加入如下配置:

module.exports = {
  devServer: {
    port: 8888
  }
}

说明: vue.config.js 这个文件是 @vue/cli 项目的配置文件,以前(vue-cli)它叫 config/index.js 
         

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值