【Vue学习笔记】vue/cli

什么是Vue cli?

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。

通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

一个运行时依赖 (@vue/cli-service)，该依赖：

可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

安装

1.全局安装只用装一次

npm install -g @vue/cli

2.安装好后

vue -V
查看脚手架版本

3.创建项目：使用脚手架搭建项目（文件夹）

.vue create 项目名
创建项目

4.启动项目

cd 项目名称
npm run serve

vue项目结构分析

在这里插入图片描述

buid：打包配置的文件夹

config：webpack对应的配置
src：开发项目的源码
- App.vue：入口组件。.vue文件都是组件。
- main.js：项目入口文件。
static：存放静态资源
.babelrc：解析ES6的配置文件
.editorcofnig：编辑器的配置
.postcssrc.js：html添加前缀的配置
index.html：单页面的入口。通过 webpack打包后，会把 src 源码进行编译，插入到这个 html 里面来。
package.json：项目的基础配置，包含版本号、脚本命令、项目依赖库、开发依赖库、引擎等。

小扩展:
1.项目启动的时候为什么是npm run serve？

项目的启动命令在项目下的package.json文件中的scripts节点里面配置，默认的是serve,它对应的启动都是 npm run+你配置的
唯独只有一个单词比较例外就是 start , start这个单词再启动的时候可以不加run

2.启动完项目，如果想让浏览器自动开启

const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  // 自动开启浏览器
  devServer:{
    
    
    open:true,
    host:"localhost"
  }
})

3.如果想要修改端口

const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  devServer:{
    
    
    port:8899 //修改端口号
  }
})

【Vue学习笔记】vue/cli

什么是Vue cli?

安装

vue项目结构分析

猜你喜欢