今天开始,了解VUE的使用,权当是学习笔记。

本篇是VUE的第一个学习笔记,从VUE的开发环境准备,到第一个Hello VUE的创建完毕,来说起...

1、由于VUE项目依赖于Node.js,因此先要装上Node.js。

安装过程不多说,安装完毕之后,命令行输入: node -v,输出版本信息,表示安装成功;

npm 全名为Node Package Manager,是Node.js 的套件(package)管理工具,npm是集成在node中的,

命令行输入:npm -v就能查看到版本信息。

 

2、安装VUE

          安装vue-cli脚手架构建工具,输入命令: npm install -g vue-cli,安装完成即可。由于npm网站在国内速度非常慢,所以可以在命令后面加上淘宝的镜像,即:npm install -g vue-cli --registry=https://registry.npm.taobao.org

           命令行输入:vue -V 查看到vue 的版本信息,表示安装成功。

3、创建示例项目

       VUE项目创建模版有多个,我们默认选择webpack模式。

      命令行,选好项目创建的路径,输入 vue init webpack projectname 回车,如下:

依次按照提示输入,项目名、项目描述、项目作者等等,一路回车,Yes,然后就是等待项目创建完毕。从截图中可以看到在项目安装之后,会出现To get started:, 提示 进入my-vue项目目录、运行项目。如果是初次创建项目,还会有个npm install,这个命令提示你需要给项目安装依赖。切换路径到项目路径,把淘宝镜像加入到本地镜像中,执行以下命令:

 npm install -g cnpm --registry=https://registry.npm.taobao.org

  安装完毕后,会出现一个node_modules文件夹。

这个时候,我们就可以运行命令:npm run dev 来启动项目了。等待一段时间,启动完毕之后,浏览器输入 localhost:8080/

就可以看到我们创建的示例Demo了。

 

Logo

前往低代码交流专区

更多推荐