Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)
一、为确保项目能正常搭建请先去node.js官网下载node进行安装
1、安装步骤
打开https://nodejs.org/zh-cn/点击下载
文章图片
图1.png
下载完成后打开所在目录
文章图片
图2.png 点击安装
文章图片
图3.png
文章图片
图4.png
文章图片
图5.png
直至Finish完成后,打开cmd命令行窗口检查是否安装成功,如果node、npm都有版本号说明安装成功
文章图片
图6.png 淘宝镜像的使用
当node安装成功之后且npm能正常运行,我们就可以通过一些npm install xxx指令来下载一些东西了,考虑到npm的服务器在国外,拉取npm包的列表、下载包这个过程会比较缓慢。建议大家安装淘宝镜像来解决此问题,淘宝镜安装成功后就可以通过cnpm install xxx指令来下载所需要的东西了,当然这个时候npm依旧可用
cmd命令行输入指令安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
文章图片
图7.png 二、项目搭建
1、打开你要创建项目的主目录(一般你写的项目包名都会在里面)
文章图片
图8.png 打开PowerShell窗口后,执行start cmd指令可打开cmd命令行窗口(非window10以上系统应该是在上一步就可以直接打开cmd的,若一打开就是cmd可忽略此步骤)
文章图片
图9.png
文章图片
图10.png 2、安装vue-cli cnpm install vue-cli -g //全局安装vue-cli
文章图片
图11.png 查看vue-cli是否安装成功,vue list
文章图片
图12.png vue init webpack ”项目名称“
文章图片
图13.png 项目创建好后,打开刚刚创建好的test文件夹,检查node_modules依赖,缺少依赖就用cnpm install或者npm install补全
文章图片
图14.png 项目运行方法一:cmd窗口运行
文章图片
图15.png
文章图片
图16.png 项目运行方法二:使用web开发者工具编辑器运行(vscode、webstorm等等)
我这里用的是webstorm
文章图片
图17.png
文章图片
图18.png 如果你想让项目运行时自动打开浏览器,只需把config>>index.js里的autoOpenBrowser由false改为true
文章图片
图19.png 【Vue如何创建一个新的项目(Vue-cli2.x脚手架使用教程)】喜欢就给个小红心,关注我,接下来的文章将带你了解如何在项目创后好后进行基本的环境配置、开发、打包等,0基础教学,带小白走上巅峰之路,
技术交流群:186222982,欢迎咨询
推荐阅读
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 如何寻找情感问答App的分析切入点
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- django-前后端交互
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)
- java中如何实现重建二叉树