Vue CLI 脚手架

简介: 🍅程序员小王的博客:程序员小王的博客🍅 欢迎点赞 👍 收藏 ⭐留言 📝🍅 如有编辑错误联系作者,如果有比较好的文章欢迎分享给我,我会取其精华去其糟粕🍅java自学的学习路线:java自学的学习路线

一、什么是CLI 脚手架(规范,标准)

  • 官方:Vue.js 开发的标准工具
  • **CLI ** :命令行界面

命令行界面(英语:command-line interface,缩写:CLI )是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(CUI)


0.png


二、什么是Vue CLI

vue的命令行接口,相当于java中的(项目创建管理:maven 项目构建工具)


通过vue cli提供的一个标准的vue应用 这个vue应用就存在对应的脚手架规范


Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。 使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。 前端系统


脚手架(vue项目的规范)=》构建时需要使用命令=》构建出的项目就存在规范===》命令:构建项目+开发:图像界面开发


三、 Vue CLI优势

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


通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发(不需要引入vue-min.js等)


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

可升级;(一个命令搞定)

基于 webpack 构建,并带有合理的默认配置;(webpack 前端打包工具 )index.html+组件(N个)

可以通过项目内的配置文件进行配置; cli 项目配置文件 添加

可以通过插件进行扩展。 cli 项目里


一个丰富的官方插件集合,集成了前端生态中最好的工具。 webpack打包工具===>dist目录 nodejs 服务器(tomcat java) 热部署插件 npm包


webpack 编写的时候是javascript6运行时自动编译为javascript6

一套完全图形化的创建和管理 Vue.js 项目的用户界面(vue cli3.x才支持 | 当前企业中用的是vue cli 2.x)


node.js 的服务器 支持热部署


四、Vue CLI安装

1. node.js环境准备

(1)下载nodejs

http://nodejs.cn/download/

windows系统: .msi 安装包(exe)指定安装位置 .zip(压缩包)直接解压缩指定目录

mac os 系统: .pkg 安装包格式自动配置环境变量 .tar.gz(压缩包)解压缩安装到指定名


(2)配置nodejs环境变量

1.windows系统:

计算上右键属性----> 高级属性 ---->环境变量 添加如下配置:


NODE_HOME=  nodejs安装目录

 PATH    = xxxx;%NODE_HOME%


2.macos 系统

推荐使用.pkg安装直接配置node环境


(3)验证nodejs环境是否成功

启动cmd窗口

在任意位置 输入命令: node –v

展示node版本即可v14.0.0


1.png


(4)npm介绍

node package mangager nodejs包管理工具 前端主流技术 npm 进行统一管理

maven 管理java后端依赖 远程仓库(中心仓库) 阿里云镜像

npm 管理前端系统依赖 远程仓库(中心仓库) 配置淘宝镜像

npm (node package manager) nodejs包管理工具

在世界范围内维护的中心库,用于管理前端js文件


2.png


命令基本使用

npm install axios         通过网络从中心库下载axios  没有版本时默认下载最新版本
npm install axios@x.x.x   通过网络从中心库下载axios指定版本


(5)配置淘宝镜像

npm install axios         通过网络从中心库下载axios  没有版本时默认下载最新版本
npm install axios@x.x.x   通过网络从中心库下载axios指定版本


3.png


  • 查看淘宝镜像是否安装成功
npm config get registry


4.png


(7)配置npm下载依赖位置

#windows:
  #1.设置缓存位置
  npm config set cache "D:\noderepository\npm-cache"
  #2.设置
  npm config set prefix "D:\noderepository\npm_global"
#mac os:
  npm config set cache "/Users/chenyannan/dev/nodereps"
  npm config set prefix "/Users/chenyannan/dev/nodereps"

5.png


(8)验证nodejs环境配置

npm config ls


6.png


2.安装脚手架

(1)卸载脚手架

npm uninstall -g @vue/cli  //卸载3.x版本脚手架
  npm uninstall -g vue-cli  //卸载2.x版本脚手架


(2)Vue Cli官方网站

https://cli.vuejs.org/zh/guide/


(3)安装vue Cli

npm install -g vue-cli

7.png

8.png


输入 vue init

9.png


(2)配置nodejs本地仓库环境变量

path=…;D:\noderepository\npm_global

目的:便于后续使用vue cli相关命令


(3)测试命令能否执行

窗口中输入命令 :vue init


10.png


显示如上界面即可


3.第一个vue脚手架项目

(1) 创建vue脚手架第一个项目

  • vue init webpack 项目名

11.png


(2)创建第一个项目

下载失败提示

12.png


下载成功后

  hello     ------------->项目名
    -build  ------------->用来使用webpack打包使用build依赖  构建一些依赖文件
    -config ------------->用来做整个项目配置目录   主要用来对 开发 测试 环境进行配置
    -node_modules  ------>用来管理项目中使用依赖
    -src           ------>用来书写vue的源代码[重点]
      +assets      ------>用来存放静态资源 [重点]
        components   ------>用来书写Vue组件 [重点]
        router       ------>用来配置项目中路由[重点]
        App.vue      ------>项目中根组件[重点]
        main.js      ------>项目中主入口[重点]
    -static        ------>其它静态
    -.babelrc      ------> 将es6语法转为es5运行
    -.editorconfig ------> 项目编辑配置
    -.gitignore    ------> git版本控制忽略文件
    -.postcssrc.js ------> 源码相关js
    -index.html    ------> 项目主页
    -package.json  ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改
    -package-lock.json ----> 对package.json加锁
    -README.md         ----> 项目说明文件


14.png

15.png


下载成功后

16.png


文件显示

17.png


(3)如何运行在项目的根目录中执行

a、 切换到创建项目的根目录

b、 在项目根目录中执行命令 npm run dev


18.png


(4)如何访问项目

http://localhost:8080

19.png


(5)项目的包结构

20.png


传文件时这两个文件可以删除./当前目录

21.png


(5)Vue Cli中项目开发方式

注意: 一切皆组件 一个组件中 js代码 html代码 css样式

1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统

2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件


4.如何开发Vue脚手架

注意:在Vue cli 中一切皆组件



5、案例

22.png

23.png


components中(组件中)


<template>
  <div class="hello">
    {{msg}}
    <h1>这是我女朋友杨福君!</h1>
  </div>
</template>
<script>
export default {
  name: 'user',
  data () {
    return {
      msg: '人物介绍'
    }
  }
}
</script>


router路由

import Vue from 'vue'
import Router from 'vue-router'
import user from '@/components/user'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/user',
      name: 'User',
      component: user
    }
  ]
})


app.vue组件

<template>
  <div id="app">
    <img width="600px" src="./assets/logo.jpg">
    <router-link :to="{name:'User'}">展示用户信息</router-link>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

24.png

相关文章
|
1天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
14 7
|
1天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
14 6
|
1天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
11 6
|
1天前
|
JavaScript 索引
vue 在 v-for 时给每项元素绑定事件
在 Vue 中使用 v-for 渲染列表时,可以通过给每项元素绑定事件来实现交互功能。通常使用 `@click` 等事件修饰符,结合方法或内联表达式来处理事件。例如:`&lt;li v-for=&quot;item in items&quot; @click=&quot;handleClick(item)&quot;&gt;{{ item }}&lt;/li&gt;`。
|
2天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
15 2
|
Web App开发 JavaScript 前端开发
【Vue五分钟】 Vue Cli脚手架安装配置
这个脚手架是一个基于Vue快速进行的开发的完成系统;是基于webpack构建开发的,带有合理的配置,可以通过项目的文件进行配置。
【Vue五分钟】 Vue Cli脚手架安装配置
|
缓存 资源调度 JavaScript
Vue——安装@vue/cli(Vue脚手架)的三种方式
安装@vue/cli(Vue脚手架)的三种方式
214 0
|
JavaScript 测试技术 开发工具
Vue CLI脚手架
Vue CLI脚手架
306 0
Vue CLI脚手架
|
3天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
27 7
|
3天前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
15 1