当前位置:首页 > 技术文章 > 正文内容

安装Vue.js,搭建Vue环境(vue 安装)

zonemu2个月前 (07-28)技术文章22

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

相关文章

7 款最佳 Linux 桌面发行版,颜值天花板

一、elementary OS二、Deepin三、Pop!_OS四、Manjaro Linux五、KDE Neon六、Zorin OS七、Nitrux OS想必大家都知道三大常用操作系统:Linux、...

零基础开始学 Web 前端开发,有什么建议?(附视频教程)

WEB前端看似简单,其实不然,要学的知识点很多很杂,对于零基础学习前端的小伙伴来说,一份详细的前端学习知识点大纲尤为重要。下面,话不多说,直接上干货(全网最全,没有之一)。PS:文末有福利(全阶段视频...

「 VUE3 + TS + Vite 」父子组件间如何通信?

组件之间传值,大家都很熟悉,涉及到 VUE3 +TS 好多同学就无从下手了,所以分享这篇文章,希望看完后提起 VUE3+TS 能够不慌不忙。平时使用的函数如:ref、reactive、watch、co...

GitLab-合并请求(gitlab合并请求合并者还原图解)

描述合并请求可用于在您对项目进行的其他人员之间交换代码,并轻松与他们讨论更改。合并请求的步骤步骤1-在创建新的合并请求之前,GitLab中应该有一个创建的分支。您可以参考本章来创建分支-步骤2-登录到...

web前端是什么,在哪些地方有应用,html和html5区别都在这里了

web前端是什么,在哪些地方有应用简介web前端开发技术什么是html、html5什么是css、css3什么是js,javascriptweb前端的应用大家好,我是ots_luo,很多小伙伴不知道we...

详解HTML5培训课程行业标准(html5课程总结)

需要HTML5培训必须先了解HTML5前景,没前景的职业,我们绝对不去入坑,这是正常人的思维。因此学习HTML5还的要多了解一些,目前HTML5技术已经日趋成熟,从国内热潮来看很多企业已开始使用,所以...