Vue脚手架(快速搭建Vue工程)
脚手架,即 预先定义好的目录结构及基础代码。而Vue的脚手架是Vue-cli,脚手架能帮助我们快速生成一个Vue的项目模板。
他的主要功能如下:
环境准备:node.js(>=6.x,首选8.x) + git
然后我们就可以下载我们的vue-cli了。在cmd中输入:(-g表示全局安装,也就是global的缩写),npm记得设置淘宝的镜像源,会比较快。
查看自己是否已经设置了淘宝的镜像源,请在cmd输入:
npm get registry
如果显示结果如上,那么就说明已经设置过了,如果不是,那么请使用以下语句进行配置:
npm config set registry http://registry.npm.taobao.org/
配置完成后,我们就可以使用以下命令安装我们的脚手架了。
指定版本 npm i -g @vue/cli@版本号 不指定版本 npm install -g @vue/cli
如果需要更新vue/cli,那么使用以下命令:
npm update -g @vue/cli
然后,我们下载我们的webpack,如下:
npm i webpack webpack-cli -g
都下载好后就可以用脚手架直接搭建项目了。使用命令:
vue init webpack [项目名]
这里,他问的是 1、项目名叫myproject可好(直接回车,需要改名就输入要改的名) 2、项目描述是A Vue.js project(直接回车,需要改描述就输入描述) 3、作者(可以输,也可以不输) 4、Vue的创建(直接回车,选择单机版) 5、是否下载Vue-router等等(根据自己的情况下,我一般选择否,然后根据自己想要的版本号再自己下) 6、最后一个选Yes,use NPM即可。 等项目创建完成后,他会告诉我们运行这两条指令来运行我们的vue项目。
cd [刚才webpack后面接的项目名] npm run dev
照做就完了。 然后,我们就可以登陆我们的 http://localhost:8080 看一下是否搭建成功了。 如果看到这个就说明成功了。 接下来就是删除操作了,把不需要的组件(例如里面的HelloWorld)删掉,然后就是一个几乎干净的Vue工程了。
|