Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)

一、为确保项目能正常搭建请先去node.js官网下载node进行安装
1、安装步骤 打开https://nodejs.org/zh-cn/点击下载

Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图1.png
下载完成后打开所在目录

Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图2.png 点击安装

Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图3.png Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图4.png Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图5.png
直至Finish完成后,打开cmd命令行窗口检查是否安装成功,如果node、npm都有版本号说明安装成功

Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图6.png 淘宝镜像的使用
当node安装成功之后且npm能正常运行,我们就可以通过一些npm install xxx指令来下载一些东西了,考虑到npm的服务器在国外,拉取npm包的列表、下载包这个过程会比较缓慢。建议大家安装淘宝镜像来解决此问题,淘宝镜安装成功后就可以通过cnpm install xxx指令来下载所需要的东西了,当然这个时候npm依旧可用
cmd命令行输入指令安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图7.png 二、项目搭建
1、打开你要创建项目的主目录(一般你写的项目包名都会在里面) Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图8.png 打开PowerShell窗口后,执行start cmd指令可打开cmd命令行窗口(非window10以上系统应该是在上一步就可以直接打开cmd的,若一打开就是cmd可忽略此步骤)

Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图9.png Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图10.png 2、安装vue-cli cnpm install vue-cli -g //全局安装vue-cli
Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图11.png 查看vue-cli是否安装成功,vue list
Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图12.png vue init webpack ”项目名称“
Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图13.png 项目创建好后,打开刚刚创建好的test文件夹,检查node_modules依赖,缺少依赖就用cnpm install或者npm install补全

Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图14.png 项目运行方法一:cmd窗口运行

Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图15.png
Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图16.png 项目运行方法二:使用web开发者工具编辑器运行(vscode、webstorm等等)
我这里用的是webstorm
Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图17.png Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图18.png 如果你想让项目运行时自动打开浏览器,只需把config>>index.js里的autoOpenBrowser由false改为true
Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
文章图片
图19.png 【Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)】喜欢就给个小红心,关注我,接下来的文章将带你了解如何在项目创后好后进行基本的环境配置、开发、打包等,0基础教学,带小白走上巅峰之路,
技术交流群:186222982,欢迎咨询

    推荐阅读