美文网首页
vue环境搭建以及创建项目

vue环境搭建以及创建项目

作者: 糖小七lxc | 来源:发表于2019-03-08 04:47 被阅读0次

vue.js 很火热,之前作为android开发对于前端了解甚少。抽空之余,想自己尝试一番。

vue-环境搭建

1.安装node.js

  • 我们需要知道什么是node.js,首先node.js不是一门语言,不是库,不是框架,只是一个javaScript运行时环境。简单的说node.js可以解析javaScript。

  • node.js的优点: 快,性能高,开发效率高,应用范围广。

  • node.js 的包管理器 npm,是全球最大的开源库生态系统。绝大多数JavaScript相关的包都存放了npm上。

  • 下载地址 :https://nodejs.org/en/

  • 出现下图说明安装完成。


    node版本.PNG
  • npm包管理器,是集成在node中的,所以,直接输入npm -v就会如下图所示,显示出npm的版本信息。


    npm版本.PNG

2.vue-cli脚手架安装

vue-cli是vue的脚手架工具,可以帮助我们在实际开发中自动生成vue.js的模板工程。包含目录结构,本地调试,代码部署,热加载等。
全局安装脚手架:
npm install-g vue-cli

3.新建项目

选择你要存放项目的地方。
在命令行中输入:vue init webpack demo(项目文件夹名)

新建vue项目.PNG

出现下图说明创建完成:


创建完成.PNG

打开刚才的目录会发现多了个文件夹。
然后进入文件夹 ,如:
cd test

4.运行项目

安装依赖,如下图:
npm install

安装依赖.PNG

然后运行
npm run dev

运行.PNG 图片.PNG

然后在浏览器中打开 http://localhost:8080

完成.PNG

vue开发环境搭建完毕。
ps:控制台ctrl+c可以退出。
一起动手试试把。

相关文章

  • vue环境搭建以及创建项目

    vue.js 很火热,之前作为android开发对于前端了解甚少。抽空之余,想自己尝试一番。 vue-环境搭建 1...

  • 【美团网项目】2.Vue基础知识

    知识点 环境搭建(如何快速搭建 Vue 环境 / 创建一个 Vue 项目) 模板语法 计算属性 类与样式 条件&列...

  • Vue系列之WebPack与Eslint

    上一篇文章,我们在window上搭建了vue的开发环境,windows下搭建vue开发环境,并且创建了项目,我们看...

  • vue-cli入门篇之——sass的运用

    在创建好的vue项目目录中打开命令行(如果没有创建项目移步本人CSDN博客vue-cli入门(一)——搭建环境),...

  • mac下搭建vue环境以及创建vue项目

    1、安装homebrew(是Mac OS x下的软件包管理工具,可以安装,卸载,更新,查看,搜索等功能) 终端输入...

  • 第二十一讲 vue环境搭建以及入门

    本章主要介绍vue的开发环境搭建以及vue项目的创建 (vue我也只会照葫芦画瓢,不是太会,所以这一方面你自己看一...

  • Vue搭建

    -- Vue 环境搭建及项目创建 -- 环境需求1、需要node.js 环境2、npm - node.js 包管理...

  • vuejs开发环境搭建

    vue开发环境搭建(官方推荐命令) 必须有node环境 1.创建&启动项目(webpack创建) 2.创建&启动项...

  • VUE环境搭建&创建项目

    一、环境确认 1、node.js检查方法:运行窗口输入node -v,npm -v若npm版本较低,输入npm -...

  • Kbone 基础 - [03] Vue + Kbone 实现 T

    1、搭建Vue开发环境 在命令行输入以下命令,创建一个 vue-todos 项目: 2、编写Vue todos代码...

网友评论

      本文标题:vue环境搭建以及创建项目

      本文链接:https://www.haomeiwen.com/subject/ltqlpqtx.html