使用vue-cli脚手架快速搭建一个基于vue的项目
前期准备工作
一、 nodeJs的安装和环境配置(window)
-
下载对应你系统的Node.js版本:https://nodejs.org/en/download/
-
nodeJs安装过程中修改了安装目录,其他选项一路绿灯通行,安装完成后目录结构如下(ps:node_global和node_cache文件夹是修改了node默认的全局模块和缓存路径后生成的文件夹)
使用cmd执行node -v正确输出node的版本信息说明node安装成功 -
node环境变量的配置
在系统变量path中添加node的安装目录
在系统变量中新增NODE_PATH的变量名,值为node模块全局下载的保存路径
二、 vue-cli脚手架的安装
- 在cmd中执行npm install -g vue-cli命令(ps:这将会是一个漫长的等待过程)
聪明的程序猿们当然不能忍受,在百度后,果断抛弃npm这慢如蜗牛的下载,安装淘宝提供的镜像,在cmd中执行npm install -g cnpm --registry=https://registry.npm.taobao.org
WARN deprecated的警告可以忽略,安装完成后使用cnpm -v查看是否正确输出cnpm的相关版本信息
执行cnpm install -g vue-cli重新安装vue-cli脚手架
这次快的就跟拉稀一样,淘宝镜像的下载速度非常值得点赞.最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack,安装完成后,可以使用 vue -V （注意 V 大写）查看是否安装成功。
如需要自行安装webpack插件可执行npm install -g webpack或者cnpm install -g webpack
正式开始使用vue-cli快速创建一个项目
-
通过cd命令进入工作空间目录
-
执行vue init webpack project,其中 webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板project 是自定义的项目名称(ps:cmd中输出乱码有大神知道吗)
-
cd进入项目目录,使用cnpm install安装项目依赖
-
在安装完项目依赖后执行npm run dev启动项目,访问8080端口即可查看
至此使用vue-cli脚手架快速搭建的vue项目就完成了
文中的错误或者言辞不当希望大神们多指教,刚开始弄vue