vue-cli 简单实践

最新推荐文章于 2024-09-15 00:00:00 发布
最新推荐文章于 2024-09-15 00:00:00 发布
阅读量147 收藏
点赞数
文章标签： vue npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LLTKM/article/details/116605297
版权

文章目录

vue-cli 安装

nodejs下载

首先需要安装nodejs，需要nodejs中npm包管理

在这里插入图片描述

下一步

在这里插入图片描述

nodejs安装位置

在这里插入图片描述
我一般是添加环境变量
在这里插入图片描述
我暂时不用C/C++,Python，没选
在这里插入图片描述
安装
在这里插入图片描述
安装成功
在这里插入图片描述
CMD查看 nodejs与npm版本确认安装成功

node -v
npm -v

在这里插入图片描述
出现版本安装成功，不过npm不一定是最新的

目前包存储在
在这里插入图片描述

更改npm的包存储路径

npm config set prefix "D:\programmer\NPM global package\global"
npm config set cache "D:\programmer\NPM global package\cache"

目录需存在
在这里插入图片描述
在这里插入图片描述
查看全局路径

npm list -global

在这里插入图片描述
配置镜像

npm config set registry=http://registry.npm.taobao.org

在这里插入图片描述

查看配置

npm config list

在这里插入图片描述
框框圈起来的是配置文件路径
在这里插入图片描述
全局升级下npm -g代表全局安装

npm i npm -g

在这里插入图片描述
此时 npm list -global 不为空
在这里插入图片描述
不过，现在npm位置改变原默认路径的modules不可以使用，配置环境变量

NODE_PATH ：D:\programmer\NPM global package\global\node_modules
在这里插入图片描述
配置环境变量后，需要新打开cmd，不然环境变量不生效

全局安装vue，vue-router，vue-cli

npm i vue -g
npm install vue-router -g
npm install vue-cli -g

在这里插入图片描述
在这里插入图片描述
添加命令到环境变量，确保cmd中可以使用
在这里插入图片描述
PATH中添加：D:\programmer\NPM global package\global
在这里插入图片描述
重新打开一个cmd 查看vue 版本

vue -V

在这里插入图片描述
创建vue项目
创一个项目文件夹，在项目文件夹目录下执行，创建demo项目

vue init webpack demo

在这里插入图片描述
首次进入需要初始化依赖

根据提示运行项目
在这里插入图片描述
进入项目目录
npm i 初始化依赖
运行项目

cd demo
npm i
npm run dev

在这里插入图片描述
页面路径
在这里插入图片描述
在这里插入图片描述
如果需要在服务器上访问，需要

npm run build

在这里插入图片描述
运行dist
在这里插入图片描述

vscode使用

vscode下载
快速使用vscode打开文件
cmd窗口下：

code ./

在这里插入图片描述
在这里插入图片描述

中文插件:插件下查找
Chinese (Simplified) Language Pack for Visual Studio Code
在这里插入图片描述

vscode中vue常用插件

  1. Vetur —— 语法高亮、智能感知、Emmet等
    包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

  2. EsLint —— 语法纠错

  3. view in browser —— 如何用浏览器预览运行html文件

  4. Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个）

  5. Auto Close Tag —— 自动闭合HTML/XML标签

  6. Auto Rename Tag —— 自动完成另一侧标签的同步修改

  7. JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

  8. Path Intellisense —— 自动路劲补全

  9. HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式

  10. React-native 快捷键显示-----react组件模板；例如：cccs

  11. vue vscode snippets 快捷键显示------vue组件模板；例如：vba
    压缩文件：1、在拓展商店里搜索“minify”，安装，安装成功后点重新加载。2、使用：F1运行文件缩小器 ，搜索Minify并运行即可

常用快捷键

  • 编辑器与窗口管理
    -1. 新建文件: Ctrl+N
    -2. 文件之间切换: Ctrl+Tab
    -3. 打开一个新的VS Code编辑器: Ctrl+Shift+N
    -4. 关闭当前窗口: Ctrl+W
    -5. 关闭当前的VS Code编辑器: Ctrl+Shift+W
    -6. 切出一个新的编辑器窗口（最多3个): Ctrl+
    -7. 切换左中右3个编辑器窗口的快捷键: Ctrl+1 Ctrl+2 Ctrl+3
  • 代码编辑
    • 格式调整
      -1. 代码行向左或向右缩进: Ctrl+[ 、 Ctrl+]
      -2. 复制或剪切当前行/当前选中内容: Ctrl+C 、 Ctrl+V
      -3. 代码格式化: Shift+Alt+F
      -4. 向上或向下移动一行: Alt+Up 或 Alt+Down
      -5. 向上或向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down
      -6. 在当前行下方插入一行: Ctrl+Enter
      -7. 在当前行上方插入一行: Ctrl+Shift+Enter
    • 光标相关
      -1. 移动到行首: Home
      -2. 移动到行尾: End
      -3. 移动到文件结尾: Ctrl+End
      -4. 移动到文件开头: Ctrl+Home
      -5. 移动到定义处: F12
      -6. 查看定义处缩略图(只看一眼而不跳转过去): Alt+F12
      -7. 选择从光标到行尾的内容: Shift+End
      -8. 选择从光标到行首的内容： Shift+Home
      -9. 删除光标右侧的所有内容(当前行): Ctrl+Delete
      -10. 扩展/缩小选取范围： Shift+Alt+Right 和 Shift+Alt+Left
      -11. 多行编辑(列编辑): Alt+Shift+鼠标左键 或 Ctrl+Alt+Down/Up
      -12. 同时选中所有匹配编辑(与当前行或选定内容匹配): Ctrl+Shift+L
      -13. 下一个匹配的也被选中: Ctrl+D
      -14. 回退上一个光标操作: Ctrl+U
      -15. 撤销上一步操作: Ctrl+Z
      -16. 手动保存: Ctrl+S
    • 重构代码
      -1. 找到所有的引用: Shift+F12
      -2. 同时修改本文件中所有匹配的: Ctrl+F2
      -3. 跳转到下一个 Error 或 Warning: 当有多个错误时可以按 F8 逐个跳转
    • 查找替换
      -1. 查找: Ctrl+F
      -2. 查找替换: Ctrl+H
    • 显示相关
      -1. 全屏显示(再次按则恢复): F11
      -2. 放大或缩小(以编辑器左上角为基准): Ctrl +/-
      -3. 侧边栏显示或隐藏： Ctrl+B
      -4. 显示资源管理器(光标切到侧边栏中才有效): Ctrl+Shift+E
      -5. 显示搜索(光标切到侧边栏中才有效): Ctrl+Shift+F
      -6. 显示(光标切到侧边栏中才有效): Git Ctrl+Shift+G
      -7. 显示 Debug: Ctrl+Shift+D
      -8. 显示 Output: Ctrl+Shift+U
  • 自动保存 File下拉中或者Ctrl+Shift+P，输入 auto
  • 终端显示：Ctrl+~

vscode终端不让执行命令

.\build.ps1 : 无法加载文件 G:\下载\metasploitable3-master\build.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 h
ttps:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ .\build.ps1
+ ~~~~~~~~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

解决办法
Get-ExecutionPolicy -List --可查看（可忽略）
set-executionpolicy remotesigned --修改执行策略 选择Y
在这里插入图片描述

npm i 模块名 保存到package.json文件中

dependencies与devDependencies的分别
dependencies是程序运行必须的包
devDependencies是开发所需的包

npm i 模块名 -S 会添加到package.json中的dependencies中
npm i 模块名 --save-dev 会添加到package.json中的devDependencies中

vue 插入Element-ui包

npm i element-ui -S

在这里插入图片描述
main.js 安装element-ui依赖，加入到Vue，调用elemnt-ui中index样式

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

在这里插入图片描述
去element-ui官网调用一个

element-ui官网
在这里插入图片描述
加入到HelloWorld.vue

<template>
  <div class="hello">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

在这里插入图片描述

在这里插入图片描述

LLTKM
关注
vue-cli(VUE脚手架)详细教程
qq_40988780的博客
09-19 736
vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。 vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 1.安装vue-cli ①使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -.
Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动
肖朋伟
11-15 2239
Vue 框架-10-搭建脚手架 CLI 脚手架是通过 webpack 搭建的开发环境 使用 ES6 语法 打包和压缩 JS 为一个文件 项目文件在环境中，而不是浏览器 实现页面自动刷新 环境准备 1.安装 node.js 官网：https://nodejs.org/zh-cn/ 2.打开终端或者 cmd 使用下面两个命令进行测试： 要求：node 版本 &amp;amp;amp;gt;6.9.0 ...
Vue Cli 使用详解（vue cli怎么用），从0开始，手把手操作！
沐枫
05-16 5170
前言： 随着Web技术的不断发展，目前，在前端开发框架技术领域中常用的js框架有Angular、React、Vue这三个最为常用，我个人认为Vue提取了Angular和React优点，再加上Vue自己的创作，推出了当前市场上使用量最多的框架之一，当然，Angular和React用得很多，这个都是根据各自的需求来定。 这里我们主要讨论Vue，由于Vue借助WebPack用于快速构建标准的Vue项...
vue-cli的使用;如何使用vue-cli搭建项目
hua_ban_yu的博客
05-24 2017
vue-cli使用步骤。1.安装node.js;2.安装cnpm。按快捷键Win + r 打开运行对话框，输入cmd后按回车，在弹出的命令对话框中输入 、npm install -g cnpm --registry=https://registry.npm.taobao.org  进行淘宝镜像cnpm的安装；3.安装vue-cli。在命令行窗口中输入 cnpm install vue-cli -g...
vue快捷键与基础指令
热门推荐
山外小楼
06-01 1万+
Vue基础指令和简写
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 4020
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
vue-cli开发的商城源代码
01-18
它允许开发者通过简单的命令行接口来创建一个新的Vue项目，预设了最佳实践的配置，如Webpack打包工具、Babel转译ES6+语法、热模块替换等。在创建项目时，vue-cli会生成一个基本的目录结构，包括src目录（存放源代码...
vue-cli.rar
12-24
2. **插件机制**：Vue CLI 支持安装和管理各种插件，如Vuex、Vue Router、Webpack等，这使得在项目中集成常见功能变得简单。 3. **热更新**：利用Webpack的热模块替换（HMR）特性，Vue CLI 可以在代码修改后实时...
vue-cli 使用vue-bus来全局控制的实例讲解
10-18
在本文中，我们将深入探讨如何在`vue-cli`环境下使用`vue-bus`进行全局状态管理。`vue-bus`是一种轻量级的事件总线，用于在Vue组件...通过实践和理解这些概念，你可以更好地掌握在`vue-cli`项目中使用`vue-bus`的方法。
基于vue-cli 的 Element UI 的后台系统模板
02-21
6. **路由管理**：Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 深度集成，使得实现前端路由变得简单。在后台系统模板中，通常会配置多个路由来对应不同的后台页面，实现页面之间的跳转。 7. **API请求**：...
基于vue-cli vue-router搭建底部导航栏移动前端项目
08-27
Vue CLI 是Vue.js官方提供的一个脚手架工具，它能够快速地初始化一个包含最佳实践的Vue.js项目模板，极大地提高了开发效率。Vue Router则是Vue.js官方的路由管理器，它使单页面应用的路由管理变得简单而灵活。 1. *...
vue项目中的小知识--快捷键-vue插件版本号--vscode插件等
joan_yb的博客
03-03 2271
vue项目中的小知识--快捷键等
快速构建vue-cli脚手架
梦里回忆-专栏
03-15 5121
构建环境: node.js环境（npm包管理器） vue-cli 脚手架构建工具 安装node.js: 1.从node.js官网下载安装，点击“下一步”直接安装 2.安装完成之后，打开命令行工具，输入node -v，如下图，如果出现相应的版本号，则说明安装成功。 3.npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息。 no...
vue制作快捷键
zhan_lijian的博客
10-10 3668
created() { let arr = []; let that = this; document.onkeydown = function(e) { if (arr.length &gt; 0) { // a-z按键长按去重 if (arr.indexOf(e.key.toLowerCase()) &gt;= 0) { return; } } arr.push(e.key...
切换淘宝最新镜像源npm
最新发布
爱敲代码的卡拉米的博客
09-15 168
通过以上步骤，您就成功地将npm的镜像源切换到了淘宝。这样做可以加快包的下载速度，并且在安装依赖时更加稳定。如果有任何问题或需要进一步帮助，请随时告诉我！1. 打开命令行工具（如Terminal、CMD等）。
pnpm解說
owolai的博客
09-10 618
pnpm（Performance Node Package Manager）是一个高性能的Node.js包管理器，它旨在解决npm和yarn在处理依赖关系时可能遇到的一些问题，如重复安装相同版本的包、包的存储空间占用过大等。pnpm使用了一种称为“硬链接”和“符号链接”的文件系统技术，这使得它能够以更高效的方式存储和管理依赖项。
vs code: pnpm : 无法加载文件 C:\Program Files\nodejs\pnpm.ps1，因为在此系统上禁止运行脚本
Impossible==I'm possible.
09-14 227
vs code 运行pnpm 无法加载文件pnpm.ps1
Certificate has expired(npm 安装strapi)
weixin_53545457的博客
09-14 206
在安装strapi时遇到的和证书过期问题及解决安装成功步骤
onpm报错： Install failed
老邓头
09-11 337
onpm报错： Install failed
webpack4+Vue构建个人Vue-cli实践教程
作者强调了vue-cli在简化Vue开发中的重要性，并提到自己基于webpack4进行项目搭建的实践。文章提供了前置知识需求（熟悉webpack4和Vue），并逐步介绍了创建项目的基本骨架，包括初始化npm项目、安装webpack和webpack...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值