vue入门环境搭建及demo运行

柔情只为你懂 2022-05-20 04:04 255阅读 0赞

####  ####

#### vue简介： ####

> Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

#### 第一步：安装node.js 下载链接[https://nodejs.org/en/][https_nodejs.org_en] ####

#### node简介 ####

> Node.js是一个Javascript运行环境。实际上它是对Chrome V8引擎进行了封装。Node 是一个服务器端 JavaScript 解释器，他会改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序，编写能够处理数万条同时连接到一个物理机的连接代码。那直白的说，Node.js就是服务器程序，是用来做后端的技术，不能直接用于前端开发。但是干前端的学会了会更加的牛逼，对编程的思想和代码效率有很大的提升。Node大量使用时间驱动实现异步开发，能够高效的打通前后端，所以vue也是采用他作为配置环境，便于大型项目的开发。

如何查看是否安装成功：黑窗口（命令行）中输入：node -v

![Image 1][]

image.png

#### 第二步：安装vue.js ####

打开cmd命令框，输入 npm install vue  
如下图：

![Image 1][]

image.png

#### 第三步：安装vue-cli工具 ####

Vue-cli是vue官方提供的一个命令行工具（vue-cli），可用于快速搭建大型单页应用

打开cmd命令框，输入 npm install --global vue-cli

#### 第四步 ：安装webpack ####

打开cmd命令框,输入 npm install webpack -g

#### 第五步：创建vue的demo项目 ####

进入到你想要存放项目的目录下，执行该命令（ vue init webpack 项目名称）：  
vue init webpack demo\_vue  
demo项目及生成。

##### demo目录结构 #####

![Image 1][]

image.png

#### 第六步：运行vue的demo项目 ####

cd demo_vue //进入到刚创建的项目中 $ npm install $ npm run dev //运行项目 在浏览器直接访问：http://localhost:8080/即可

![Image 1][]

image.png

[https_nodejs.org_en]: https://link.jianshu.com/?t=https://nodejs.org/en/
[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue05之ElementUI入门+nodejs环境搭建+运行nodejs项目

[14天阅读挑战赛][14] 努力是为了不平庸~ 目录 1. ElementUI入门 1.1 ElementUI简介 1.2 Vue+ElementUI安装

曾经终败给现在/ 2024年04月01日 08:51/ 0 赞/ 66 阅读

相关【Bootstrap】Bootstrap环境搭建及demo

Bootstrap是一个流行的开源前端框架，可以用于快速构建现代化、响应式的网站和Web应用程序。要搭建Bootstrap，需要完成以下步骤： 1. 下载Bootstrap

港控/mmm°/ 2024年03月25日 23:27/ 0 赞/ 68 阅读

相关使用nodejs 对 JQuery-EasyUI Demo环境搭建运行

准备工具：1.下载jqEasyui、下载nodejs（通过nodejs运行）。 2.下载的easyui里面demo我们打开会发现总是没

深藏阁楼爱情的钟/ 2022年09月30日 00:57/ 0 赞/ 130 阅读

相关 python-环境搭建及自动化测试Demo

\一、Python3的安装 \\在windows下安装python Python下载地址：[https://www.python.org/downloads/][htt

我会带着你远行/ 2022年06月17日 14:14/ 0 赞/ 270 阅读

相关 vue入门环境搭建及demo运行

vue简介： > Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。在与

柔情只为你懂/ 2022年05月20日 04:04/ 0 赞/ 256 阅读

相关 vue入门笔记（一，搭建环境）

vue的官网：[https://cn.vuejs.org/][https_cn.vuejs.org] 一：在搭建vue的开发环境之前，一定一定要先下载node.js，，vue

野性酷女/ 2022年05月16日 15:54/ 0 赞/ 233 阅读

相关 Vue 学习（一），Vue环境搭建与运行

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝

我就是我/ 2022年03月26日 14:56/ 0 赞/ 177 阅读

相关 Vue入门——环境的搭建 vue-cli

安装vue-cli cnpm install -g @vue/cli ![在这里插入图片描述][20190122103924957.png] 创建vue项目

淡淡的烟草味﹌/ 2022年03月24日 14:50/ 0 赞/ 225 阅读

相关 vue入门——1环境搭建及项目构建启动

一、vue.js开发环境搭建： 1、安装Node.js。NodeJs的包管理器npm。npm集成了最多的前端插件，配置命令或者命令行即会下载对应开源插件、项目

谁践踏了优雅/ 2022年03月12日 08:56/ 0 赞/ 261 阅读

相关 Vue入门(搭建环境、创建运行项目)

Vue 是一个前端框架，特点是数据绑定：比如你改变一个输入框 Input 标签的值，会自动同步更新到页面上其他绑定该输入框的组件的值；组件化：页面上小到一个按钮都可以

港控/mmm°/ 2021年06月11日 15:13/ 0 赞/ 796 阅读