vue环境搭建以及创建项目

3,218 阅读1分钟

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

vue-环境搭建

1.安装node.js

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

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

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

  • 下载地址 :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可以退出。 一起动手试试把。