Vue CLI

文章目录

  • Vue-cli简介
  • 安装步骤
    • 安装Node.js
    • 安装NPM
      • 自动安装NPM
      • 设置包管理路径
      • 安装cnpm
      • 配置环境变量
    • 安装Vue-cli
  • 快速构建Vue项目
    • 步骤说明
    • 导入项目到VSCode
    • Vue脚手架自定义配置
      • package.json介绍
      • 配置项目

Vue-cli简介

官方文档:https://cli.vuejs.org/zh/guide/

基于Vue的应用开发提供的一个标准的脚手架工具,为应用搭建基础的框架结构提供插件、开发服务、Preset、构建打包功能,通过简单的命令就可以完成"零配置"的项目环境搭建,类似于后端开发的Maven

安装步骤

在安装Vue-cli前,需要先确认是否已安装Node.js和npm。可以通过以下两个命令来确认。

# 查看Node.js版本
node -v
# 查看npm版本
npm -v

# 若成功打印版本信息,则表示已安装

安装Node.js

下载地址:https://nodejs.org/en/download/
下载好后傻瓜式安装即可。

安装NPM

NPM全称 Node Package Manager,他是node包管理和分发的工具,使用NPM可以对应用的依赖进行管理,NPM 的功能和服务端项目构建工具Maven的依赖管理功能差不多,我们通过 npm 可以很方便地下载js库,打包js文件。

自动安装NPM

事实上Node.js已经集成了NPM,可以输入npm -v命令来确认版本号。

设置包管理路径

包管理路径:npm从远程下载的js包所存放的路径。

# 查询包管理路径
npm config ls

# 设置包管理路径
npm config set prefix "H:\software\nodejs_package\npm_modules" 
npm config set cache  "H:\software\nodejs_package\npm_cache"

# 之后再使用 npm config ls 命令,如下图所示

在这里插入图片描述

安装cnpm

npm默认会用国外的镜像去下载js包,速度较慢,在开发中我们通常使用国内镜像,例如淘宝镜像。
在联网的情况下,输入以下命令进行安装:

# 安装 
npm install -g cnpm --registry=https://registry.npm.taobao.org 
# 查看cnpm的版本 
cnpm -v

配置环境变量

查看npm的全局路径:npm config get prefix

在这里插入图片描述

  • 配置path环境变量:
    1. 添加新的系统变量:key=NODE_HOME,value=D:\Desktop\Java\Nodejs_package
    2. path中添加:%NODE_HOME%\npm_modules

安装Vue-cli

目前主流版本是 2.x 和 3.x 版本,这里建议安装 3.x 以上的版本,该版本可以同时创建2.x项目与3.x项目。
以管理员身份运行命令行

# 安装
npm i -g @vue/cli

# 安装完成之后查看版本号
vue -V

快速构建Vue项目

步骤说明

以管理员身份运行cmd,进入到创建好的vueTest文件夹,执行以下命令:

# 基于交互式命令方式,创建项目
# 文件名不支持驼峰命名法(含大写字母),应使用短横线方式 
vue create 项目名

在这里插入图片描述

选择需要安装的组件,空格键选择,回车键确认:

在这里插入图片描述

选择路由的模式,输入 n (选择 hash 模式) :

在这里插入图片描述

选择项目文件单独存放:

在这里插入图片描述

是否保存为模版,根据需求选择:

在这里插入图片描述

安装完成:

在这里插入图片描述

# 进入项目目录
cd my-project
# 启动项目
npm run serve

在这里插入图片描述

点击链接:

在这里插入图片描述

关闭命令行窗口即可停止项目。

导入项目到VSCode

  1. 在VSCode中右键选择打开文件夹
  2. 选择对应项目
  3. 打开项目后,即可看到如下项目结构

项目结构

Vue脚手架自定义配置

package.json介绍

package.json文件定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,配置项目所需的开发环境。

{
  // 项目基本信息
  "name": "project1",
  "version": "0.1.0",
  "private": true,
    
  // 指定运行脚本命令
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
    
  // 生产环境所依赖模块的版本
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
    
  // 本地环境开发所依赖的版本
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

配置项目

在项目的根目录创建文件vue.config.js,在该文件中进行相关的配置:

module.exports = { 
    devServer:{ 
        port:8888 
        open:true 
    } 
}
  • 配置说明:设置打包时服务器相关的信息
    • port:访问端口
    • open:true:打包完成自动打开浏览器

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战,可谓是杀敌无数,见怪不怪了!在某知识社交平台中,一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读,可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表:零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时,为空表。 在比较复杂的线性表中,一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言,按照其应用领域,可以粗略地分成三类。 有的语言是多面手,在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类,比如说 C,Java, Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后,该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情,很多情况下,他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言,首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图: 上码: 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况,重点关注在中国市场扮演重要角色的全球及本土铪生产商,呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外,针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…