真小白体验 vue-cli 3.0 项目搭建~
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
而vue最大的特点就是组件的使用,在使用vue开发项目之前,需先搭建脚手架方便后序的组件开发。
Node.js
对于本小白,刚刚学习前端,电脑上当然是没有搭建过任何环境,只有一个window桌面。对于即将要使用的vue开发,刚开始当然还是束手无策吧。废话不多说,进入主题。
Node.js是什么呢?百度一下吧。简而言之,Node.js 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
那么我们为什么要使用Node.js?
因为只有在Node.js环境下,我们才能用npm指令在命令窗口安装webpack和vue-cli等。
废话不多说 还是动手吧!
首先到Node.js官网https://nodejs.org/en/把LTS稳定版下载下来,然后下一步下一步下一步下一步傻瓜式安装。
然后win+R进入cmd命令运行窗口输入命令行 (-g为全局环境安装)
完成后输入nrm ls查看nrm列表清单
这里指向npm,由于npm访问的是国外的服务器,很容易被墙,所以我换到了淘宝的npm镜像。
输入nrm use taobao
再输入 nrm ls查看一遍是否安装完成
webpack安装
输入下图指令,这里安装了最新版本,如需要其他版本 把webpack改成(webpack@版本号 如webpack@1.14.0)
webpack -v看下是否出现版本号 出现则完成了webpack的安装
webpack是啥?还是百度一下吧
简而言之,webpack可以让你打包你的项目文件,方便管理。
vue-cli 3.0
直通车
vue的官方文档讲得很清晰了,照着做几乎就可以了。
vue安装
npm install -g @vue/cli
检查安装
vue -V (注意V是大写)
创建项目
vue create project_name
会出现下图,第一次使用直接进入第一个选项(没记错的话)
第一个选项为默认模式,第二各选项可以自己选择自己所需要配置的模块。这里先选第一项。
第二项的内容为
选好后敲Enter就创建新的vue项目了。
打开项目后的目录
搞掂~~