VUE学习-环境搭建

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ZNG_XP/article/details/78479312

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

node -v
npm -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 install
cnpm run dev

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

猜你喜欢

转载自blog.csdn.net/ZNG_XP/article/details/78479312