Vue从入门到入土系列
- 一只不务正业的Java后端码畜今天又来研究前端Vue了。
1、要搭建运行Vue项目,首先得安装一个东西叫Node。网上有很多教程这里推荐博主使用的菜鸟教程。传送门》》》》
- 当你安装成功后测试一下安装是否成功,npm包含在Node里面的,一般安装成功就有>>>>如下:
2、当把Node.js安装好以后就可以着手创建Vue项目了。由于 npm 安装下载速度特别慢,我们一般可以使用淘宝的镜像及其命令 cnpm来下载Vue以及相关项目依赖。
-
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
-
当然npm 版本需要大于 3.0,如果低于此版本需要升级它:
cnpm install npm -g
- 安装Vue-cli, vue的脚手架。
cnpm install vue-cli -g
- 然后我们测试一下vue-cli是否安装成功,显示下图表示安装成功。
vue list
3、新建vue项目,首先我们新建项目地址。
- 我在R盘新建项目,然后进入对应文件夹开始新建项目。
- 新建项目,记得下面三个选No,
第一个是关闭eslint校验。这个是个代码规范插件。会严格规范你的代码。空格缩进都会报错,一般默认就选No,当让你也可以严格要求自己。手动滑稽。第二个单元测试和第三个是e2e单元测试。默认都是选的No。别人都是选的No,咱也选No吧。
vue init webpack "项目名称"
- cd进入项目包,为你的下载相关vue依赖文件。
cnpm install
- 如果你成功走到这儿说明你已经成功了。我们来试试运行我们新建的Vue项目吧。以下便是项目访问地址。copy到浏览器试试。
cnpm run dev
- 这便是已经成功搭建了。
- 我们再来看看我们的项目目录。可以看到一个项目已经搭建好了。继续开发成我们想要的样子。
- 一直不务正业的后端码畜。初try vue,非专业。如有贻误望指正。谢谢支持!