VUE学习-环境搭建

来源:互联网 发布:转行程序员 编辑:程序博客网 时间:2024/05/17 17:59

这两天对VUE的知识开始有了兴趣,所以就开始了新的一轮学习路线,写几篇博客记录一下(前面的SpringBoot学习暂时放一段时间了,等前后端框架全部搭建完成,再去考虑做一些均衡、跨域、权限之类的处理)~
首先第一篇:环境框架搭建
首先是下载安装nodeJs
安装完成后输入:

node -vnpm -v

显示正确的版本号,则说明安装成功
这里写图片描述

然后是安装国内镜像cnpm:

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

安装 vue-cli VUE的脚手架工具:

cnpm install -g vue-cli

安装完成后,输入

vue -V

出现正确的版本号,则说明安装成功

现在环境基本安装完成,我们进入项目路径下,初始化一个项目模板

vue init webpack vue-demo-cnodejs

然后,终端里面会有提示输入:
//项目名称

? Project name

//项目描述

? Project description

//作者

? Author

//是否安装编译器(回车选择安装就行)

? Vue build (Use arrow keys)❯ Runtime + Compiler: recommended for most users  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files -render functions are required elsewhere

//安装路由管理(回车)

? Install vue-router? (Y/n)

//使用 ESLint 来检查你的代码(Y)

? Use ESLint to lint your code? (Y/n)

//检查风格选择(一般选择第一个)

? Pick an ESLint preset (Use arrow keys)❯ Standard (https://github.com/feross/standard)  Airbnb (https://github.com/airbnb/javascript)  none (configure it yourself)

//需要安装测试功能(n)

? Setup unit tests with Karma + Mocha? (Y/n)

//测试相关功能(n)

? Setup e2e tests with Nightwatch? (Y/n)

这里写图片描述

然后进入刚刚创建的项目目录下,执行

cnpm installcnpm run dev

浏览器输入localhost:8080,出现Vue欢迎界面,则说明项目运行成功
这里写图片描述

原创粉丝点击