vue 环境搭配

vue.js的运行环境配置主要分为3步:

1.安装Node.js(JavaScript运行环境)

2.安装Vue.js

3.搭建Vue-cli 创建项目

第一步:安装node.js

官网-->http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装.

第二部:

cmd命令行:

node -v  显示node版本在4.0之上就行。                                                                                              npm -v  显示npm包管理器版本。

vue 环境搭配_第1张图片

基于node.js,利用淘宝npm镜像安装相关依赖在cmd里直接输入:                                                       npm install -g cnpm --registry=https://registry.npm.taobao.org,回车,等待安装...1-2分钟。


vue 环境搭配_第2张图片

第三部:安装全局vue-cli脚手架

1、用于帮助搭建所需的模板框架:cnpm install -g vue-cli,回车,等待安装...


vue 环境搭配_第3张图片

2、.输入:vue,回车,若出现vue信息说明表示成功。


vue 环境搭配_第4张图片

3、可选择:安装在桌面的话输入cd desktop。不安装桌面省略,按照自己情况。

4.创建项目,输入:vue init webpack vue_test(项目文件夹名),回车,等待....,


vue 环境搭配_第5张图片

5、安装依赖,输入:cd vue_test(项目名),回车,进入到具体项目文件夹

      输入:npm install,回车,等待...。如果安装成功,回到项目文件夹,会发现项目结构里,多了一      个node_modules文件夹(该文件里的内容就是之前安装的依赖)


vue 环境搭配_第6张图片

6.测试环境是否搭建成功:

方法1:输入:npm run dev

方法2:在浏览里输入:localhost:8080(默认端口为8080)


vue 环境搭配_第7张图片


vue 环境搭配_第8张图片


                                         浏览器打开localhost:8080页面

7. 关掉命令行,打开localhost:8080页面打不开,需要从新运行npm run dev

注意: 运行命令行必须是项目文件目录下运行。

例: cd  f:/vue_demo/vue_test  回车   (vue_demo 目录文件夹名字,vue_test项目名字)

f:    回车

开始运行npm run dev. 

你可能感兴趣的:(vue 环境搭配)