百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

安装Vue.js，搭建Vue环境（vue.js的安装有哪几种方法）

liuian 2025-05-09 20:01 2 浏览

一、Vue 开发环境:

Node.js： javascript运行环境(runtime),不同系统直接运行各种编程语言

npm:：Nodejs下的包管理器

webpack： Vue的模板文件。把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

vue-cli:：用户生成Vue的脚手架。

二、Vue 环境搭建：

1.安装node.js：

从node.js官网下载并安装node，安装过程很简单，一直默认。

npm 版本需要大于3.0，如果低于此版本需要升级它。

查看版本：

node -v

npm -v

升级 npm：

npm install npm -g

2.使用淘宝NPM镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后可以用cnpm代替npm来安装依赖包

如果安装失败，可以npm cache clean清理缓存，重新安装。

三、Vue 安装vue-cli脚手架构建工具

cnpm install --global vue-cli

判断是否安装成功：

vue -V

卸载vue-cli脚手架

cnpm uninstall --global vue-cli

四、Vue 使用vue-cli构建项目

vue init webpack my-project

my-project是项目名称，接下来会进行一些设置。

参考：

arget directory exists. Continue? (Y/n) 直接回车默认(然后会下载模板，这里可能需要连代理)

Project name (vue-test) 直接回车默认

Project description (A Vue.js project) 直接回车默认

Author 直接回车默认

Install vue-router? 直接回车默认(安装路由)

Use ESLint to lint your code? No(严格代码检测)

pick an eslint preset. 默认Standard

set up unit tests with karma + mocha?No(单元测试不需要)

set up e2e tests with Nightwatch?No(单元测试不需要)

五、Vue 安装依赖

进入项目目录：

cd my-project

安装依赖：

cnpm install 或 npm install

项目结构里，多了一个node_modules文件夹

六、Vue 是否搭建成功

启动编译项目：npm run dev

在浏览里输入：localhost:8080(默认端口为8080)

七、Vue 发布项目

npm run build

八、安装Vue组件

一、AJAX（axios）安装

npm install axios --save

二、AJAX参数转换（qs）安装

npm install qs --save

三、Vuex 安装：

npm install vuex --save

四、前端框架（vue-beauty）安装

npm install vue-beauty --save

五、前端手机框架（Mint UI）安装

npm install mint-ui --save

六、前端框架（Element UI）安装

npm install element-ui --save

七、前端框架（Ant-design-vue）安装

npm install ant-design-vue --save

相关推荐

x-cmd install | jellex - 用 Python 语法在终端里玩转 JSON 数据!

还在为命令行下处理JSON数据烦恼吗？jellex来了！它是一款基于终端的交互式JSON和JSONLines数据处理工具，让你用熟悉的Python语法，轻松过滤、转换和探索JSO...

一篇长文带你在Python里玩转Json数据

Json简介Json（JavaScriptObjectNotation）很多网站都会用到Json格式来进行数据的传输和交换，就像上篇我提到的网易云音乐接口，它们返回的数据都是Json格式的。这因为...

Python JSON 魔法手册:数据转换的终极艺术

对话实录小白：（崩溃）我从API拿到了JSON数据，怎么变成Python对象？专家：（掏出魔法书）用json模块，轻松实现数据转换！JSON基础三连击1.字符串Python对...

Python JSON 详解教程（python json()）

JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式(lightweightdatainterchangeformat)常用于Web应用、配置文件(co...

Python 数据的 JSON 格式序列化及反序列化

在Python中，将数据转换为JSON格式非常简单，可以使用内置的json模块。json模块提供了json.dumps()和json.dump()方法，用于将Python对象...

如何使Python类可JSON序列化（python json 类）

技术背景在Python开发中，JSON（JavaScriptObjectNotation）是一种常用的数据交换格式。然而，Python的json模块默认只能序列化一些基本数据类型，如字典、列表、字...

详细介绍一下Python如何对JSON格式数据进行处理?

在Python中对于JSON数据的处理是在日常开发中的常见需求之一。通常情况下，对JSON数据的处理主要涉及到如下的的几个步骤对于JSON数据的解析操作对于JSON数据的处理操作对于JSON数据的格式...

Python 字典l转换成 JSON（python转化字典）

本文需要5分钟。如果对您有用可以点赞评论关注.Python字典到JSONJSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，它基于ECMAScrip...

打造熟悉的VS界面风格（vs界面设计美化）

用惯了老机子的VS界面，换新机子时，各种不适应。现在重新打造老款样式：1）下载VisualStudio2013ColorThemeEditorhttps://marketplace.vis...

办公小技巧:全部亮相 让Excel单元格完全显示文本

平时我们在使用Excel制作表格的时候，经常会遇到由于文本内容较多，导致这些内容无法在一个单元格中完全显示。常规的方法是将单元格设置为“自动换行”，但是这样会影响整个文件的美观。下例是某小区的入住登记...

WinForms 中的 CheckBox 控件使用指南

在WinForms中，CheckBox控件是一个允许用户选择或取消选择的单选按钮。它通常用于表示布尔值（真/假）或允许多选的情况。以下是如何使用CheckBox控件的一些基本信息和示例代码。创建...

图片转文字--四种OCR工具的安装和使用

本文仅测试简单的安装和使用，下一步应该是测试不同数据集下的检测准确率和检测效率，敬请期待。作者的系统环境是：笔记本：ThindPadP520OS：win11显卡：QuadroP520一、EasyO...

C# 给Word每一页设置不同图片水印

Word中设置水印时，可加载图片设置为水印效果，但通常添加水印效果时，会对所有页面都设置成统一效果，如果需要对每一页或者某个页面设置不同的水印效果，则可以参考本文中的方法。下面，将以C#代码为例，对W...

集成的面向对象控件Xtreme Controls正式发布v17.0.0

CodejockXtremeControls为Windows图形用户软件工程师提供众多的有关MFC的控件产品，该产品是通过完全测试并专门为图形用户设计的一款专业控件。它是一款集成了面向对象的控件被...

Win10 Build 10061老问题修复新问题来

|责编：刘菲菲【中关村在线软件资讯】4月23日消息：微软今天正式推送了Windows10Build10061预览版这个版本除了正常的功能更新和调整外，还修复了多个bug。其中一部分对于开发者开...

一周热门
最近发表
标签列表