美文网首页
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环境搭建以及创建项目

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