1.前言
之前还未完全接触Vue,在做项目时有机会用到了element ui的组件,也了解到Vue的一些基本用法,但都是通过script标签直接本地引入的,这种方式对于单页面的数据双向绑定可以很方便很爽的使用。
再一次由于项目的需求,需要用到路由,用之前的本地引用方式不知道如何解决,无奈只能去研究学习下脚手架了。
vue-cli的作用是下载模版项目,快速拉取相关依赖,类似于Springboot的快速构建,不用理解得复杂了。
2.安装Node.js
具体步骤和更多细节请参考我的另一篇博文:Node.js在Windows下安装和配置。
3.安装脚手架
3.1 Vue-Cli 2(旧版本)
搭建Vue的开发环境 ,全局安装Vue-Cli 2npm install --global vue-cli
。安装好后vue -V
查看版本信息确认是否安装成功。
3.2 Vue-Cli 3
与旧版本的区别是Vue CLI 的包名称由 vue-cli
改成了 @vue/cli
。如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),
你需要先通过 npm uninstall vue-cli -g
或 yarn global remove vue-cli
卸载它。Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
安装新版 Vue-Cli 3:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看版本:
vue -V
OR vue --version
4.创建项目
首先在cmd命令行中进入项目要存放的目录,在该目录下使用命令:vue create <Project Name>
(旧版本请用vue init webpack <Project Name>
),将<Project Name>
替换成自己命名的项目名即可创建项目,跟着导航选择,完成初始化即可。cd入项目目录后再用npm run serve
启动项目(旧版本请用npm run dev
)。
根据提示的路径和端口号,打开页面则成功。
对于旧版本,用上述方式创建的项目,目录结构有点复杂,所以有一种更简洁的创建方式:
通过命令vue init webpack-simple <Project Name>
构建项目,cd入项目目录,通过命令npm install
下载依赖,最后同样npm run dev
运行。这种方式的目录结构就很简洁,更方便。