Vue Cli脚手架—安装Nodejs和Vue Cli

news/2024/9/24 23:24:46/

一,Vue Cli 文档地址: https://cli.vuejs.org/zh/
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/fb50b3e1456e4308841a71da8e4150e6.png
二,.环境配置,搭建项目
1.安装node.js
在这里插入图片描述
2.下载 node.js10.16.3 地址: https://nodejs.org/en/blog/release/v10.16.3/

3.安装 node.js10.16.3 , 直接下一步即可, 安装到 d:\program\nodejs10.1
4.验证是否安装成功, 如果看到不到, 退出 cmd, 重新开一个窗口测试即可
在这里插入图片描述
5.先删除以前的 cli 版本<不论是之前未下载或没有下载>
npm uninstall vue-cli -g

6.安装淘宝镜像-cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
此时:该npm 淘宝镜像到期了,尽快切换~(npm使用淘宝镜像安装时报错)
切换新源:
npm config set registry https://registry.npmmirror.com

解决方案:

(1)
// 1. 清空缓存
npm cache clean --force
// 2. 关闭SSL验证
npm config set strict-ssl false
// 3. 安装
到这里就可以正常使用npm命令安装需要的工具了。如( npm install -g cnpm )
(2)
1 清空缓存
npm cache clean --force
2 查看当前的npm镜像设置
npm config get registry
3 切换新源
npm config set registry https://registry.npmmirror.com
4 查看新源是否设置成功
npm config get registry
5 可以正常安装需要的工具了
npm insatll

===============================================
7.安装 webpack 和 webpack-cli ,
webpack 是一个打包工具,指令: npm install webpack@4.41.2 webpack-cli -D
在这里插入图片描述
8.安装 npm install -g @vue/cli@4.0.3(此时没有安装cnpm,所以用npm并找出相应的版本)
在这里插入图片描述
9.确认 Vue-Cli 版本
在这里插入图片描述
三,创建项目
1.创建目录 vue_project, 并 cmd 到该目录
2.使用 webpack 创建 vue 脚手架项目 (如果出现了 downloading template…,60s 退出窗口,重新来操作一次即可.)
如果出现这种情况:绿色方框,则按照图片操作
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


http://www.ppmy.cn/news/1450865.html

相关文章

基于SSM框架的个人博客系统设计与实现:技术总结

引言 在数字化时代&#xff0c;个人博客系统已成为展示个人技术见解、分享生活点滴的重要平台。本次博客介绍了一个基于Java的个人博客系统的设计与实现&#xff0c;采用了流行的SSM&#xff08;Spring、SpringMVC、MyBatis&#xff09;技术栈&#xff0c;以及MySQL数据库和JS…

七、Google Protobuf

这里写自定义目录标题 一、编码和解码二、Netty本身的编码解码机制和存在的问三、Protobuf四、Protobuf示例1五、ProtoBuffer传输多种数据类型 一、编码和解码 二、Netty本身的编码解码机制和存在的问 netty提供的编码器 netty提供的解码器 存在的问题 无法跨语言序列化后…

软件测试面试之常见编程算法笔试题

1.请写出冒泡排序。 #冒泡排序&#xff1a;n*n def bubbleSort(array):maxindex len(array)-1maxValue array[maxindex]k0while maxindex:for i in range(1,maxindex):if array[i-1]>array[i]:temp array[i]array[i] array[i-1]array[i-1] tempk1maxindex -1print(k)re…

Python IDE(集成开发环境)有很多,以下是一些常用的选项

Python IDE&#xff08;集成开发环境&#xff09;有很多&#xff0c;以下是一些常用的选项&#xff1a; PyCharm&#xff1a;PyCharm被认为是普及率和使用率最高的一款Python IDE集成开发环境工具。它功能强大&#xff0c;支持多种开发模式&#xff0c;如科学计算、Web开发、数…

上海计算机学会2022年4月月赛C++丙组T3平衡括号(简)

题目描述 给定一个只包含 ( 与 ) 的括号序列&#xff0c;请删除尽量少的括号&#xff0c;使它变成平衡的。平衡的定义如下&#xff1a; 空序列是平衡的&#xff1b;如果某个括号序列 s 是平衡的&#xff0c;那么 (s) 也是平衡的&#xff1b;如果某两个括号序列 s 与 t 都是平…

webpack 常用插件

clean-webpack-plugin 这个插件的主要作用是清除构建目录中的旧文件&#xff0c;以确保每次构建时都能得到一个干净的环境。 var { CleanWebpackPlugin } require("clean-webpack-plugin") const path require("path");module.exports {mode: "de…

mysql binlog入门

binlog 什么是binlog binlg记录了所有的表结构变更&#xff08;CREATE、ALTER TABLE…&#xff09;以及表数据修改&#xff08;INSERT、UPDATE、DELETE…&#xff09;&#xff0c;以事件形式记录&#xff0c;还包含语句所执行的消耗的时间。 简单的说就是&#xff0c;只要对…

手写数字识别:基于决策树算法,KNN算法,支持向量机(SVM)算法与卷积神经网络(CNN)算法

对于手写数字识别任务&#xff0c;我们可以使用不同的机器学习算法来实现&#xff0c;包括决策树、K最近邻&#xff08;KNN&#xff09;、支持向量机&#xff08;SVM&#xff09;和卷积神经网络&#xff08;CNN&#xff09;。下面我将为你提供每种算法的基本代码示例。 决策树…