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

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

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

一、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

相关推荐

python入门到脱坑函数—定义函数_如何定义函数python

Python函数定义：从入门到精通一、函数的基本概念函数是组织好的、可重复使用的代码块，用于执行特定任务。在Python中，函数可以提高代码的模块性和重复利用率。二、定义函数的基本语法def函数名(...

javascript函数的call、apply和bind的原理及作用详解

javascript函数的call、apply和bind本质是用来实现继承的，专业点说法就是改变函数体内部this的指向，当一个对象没有某个功能时，就可以用这3个来从有相关功能的对象里借用过来...

JS中 call()、apply()、bind() 的用法

其实是一个很简单的东西，认真看十分钟就从一脸懵B到完全理解！先看明白下面：例1obj.objAge;//17obj.myFun()//小张年龄undefined例2shows(...

Pandas每日函数学习之apply函数_apply函数python

apply函数是Pandas中的一个非常强大的工具，它允许你对DataFrame或Series中的数据应用一个函数，可以是自定义的函数，也可以是内置的函数。apply可以作用于DataF...

Win10搜索不习惯 换个设定就好了_window10搜索用不了怎么办

Windows10的搜索功能是真的方便，这点用惯了Windows10的小伙伴应该都知道，不过它有个小问题，就是Windows10虽然会自动联网搜索，但默认使用微软自家的Bing搜索引擎和Edge...

面试秘籍:call、bind、apply的区别,面试官为什么总爱问这三位?

引言你有没有发现，每次JavaScript面试，面试官总爱问你call、bind和apply的区别？好像这三个方法成了通关密码，掌握了它们，就能顺利过关。其实不难理解，面试官问这些问题，不...

记住这8招，帮你掌握“追拍“摄影技法—摄影早自习第422日

杨海英同学提问：请问叶梓老师，我练习追拍时，总也不能把运动的人物拍清晰，速度一般掌握在1/40-1/60，请问您如何把追拍拍的清晰？这跟不同的运动形式有关系吗？请您给讲讲要点，谢谢您！摄影：Damia...

[Sony] 有点残酷的测试A7RII PK FS7

都是好机！手中利器！主要是最近天天研究fs5，想知道fs5与a7rii后期匹配问题，苦等朋友的fs5月底到货，于是先拿手里现有的fs7小测一下，十九八九也能看到fs5的影子，另外也了解一下fs5k标配...

AndroidStudio_Android使用OkHttp发起Http请求

这个okHttp的使用,其实网络上有很多的案例的,但是,如果以前没用过,copy别人的直接用的话,可以发现要么导包导不进来,要么,人家给的代码也不完整,这里自己整理一下.1.引入OkHttp的jar...

ESL-通过事件控制FreeSWITCH_es事务控制

通过事件提供的最底层控制机制，允许我们有效地利用工具箱，适时选择使用其中的单个工具。FreeSWITCH是一个核心交换与混合矩阵，它周围有几十个模块提供各种功能特性。我们完全控制了所有的即时信息，这些...

【调试】perf和火焰图_perf生成火焰图

简介perf是linux上的性能分析工具，perf可以对event进行统计得到event的发生次数，或者对event进行采样，得到每次event发生时的相关数据(cpu、进程id、运行栈等)，利用这些...

文本检索控件也玩安卓?dtSearch Engine发布Android测试版

dtSearchEngineforLinux（原生64-bit/32-bitC++和JavaAPIs）和dtSearchEngineforWin&.NET（原生64-bi...

网站后台莫名增加N个管理员，记一次SQL注入攻击

网站没流量，但却经常被SQL注入光顾。最近，网站真的很奇怪，网站后台不光莫名多了很多“管理员”，所有的Wordpres插件还会被自动暂停，导致一些插件支持的页面，如WooCommerce无法正常访问、...

多元回归树分析Multivariate Regression Trees，MRT

多元回归树（MultivariateRegressionTrees，MRT）是单元回归树的拓展，是一种对一系列连续型变量递归划分成多个类群的聚类方法，是在决策树(decision-trees)基础...

JMETER性能测试_JMETER性能测试指标

jmeter为性能测试提供了一下特色：jmeter可以对测试静态资源（例如js、html等）以及动态资源（例如php、jsp、ajax等等）进行性能测试jmeter可以挖掘出系统最大能处...

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