纯纯的新手向：从零开始用vue-cli搭建项目环境（包含安装node、yarn、cnpm、vue-cli）

Yany
126 阅读4分钟

适合纯纯的新手看的使用Vue-cli脚手架搭建项目环境全流程。 属于我这个新手的踩坑之路。

1.安装node.js

环境搭建依赖于Node.js，所以第一步是安装Node.js和Npm包管理器的安装和环境配置。

此处安装步骤我是直接参照这篇文章。

2021最新Node.js官网安装教程，配置环境变量（图文详细）

打开cmd输入，检查是否安装成功

noed -v
npm -v

image.png

上图显示版本号证明安装成功了。

2.1安装cnpm

为啥安装这个，大概是因为NPM安装插件时需要从国外服务器上下载，速度太慢还容易出现异常，所以就是用淘宝的Npm镜像官网。 安装步骤： cmd命令行输入：

npm install -g cnpm --registry=registry.npm.taobao.org 然后等待安装即可。安装成功后输入cnpm -v，检查版本查看是否安装成功。

2.2.安装yarn（此处有坑）

公司项目运行是使用的yarn 所以我就在自己电脑里装个yarn，结果踩了坑。

yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，yarn 是为了弥补 npm 的一些缺陷而出现的。 我使用的安装方法是cmd打开命令行窗口输入：

npm install -g yarn
//安装
    yarn --version
    //检查版本

安装成功后检查版本就会提示：

yarn无法正常使用，显示报错，不是内部或外部命令，也不是可运行的程序或批处理文件。

解决方法：配置环境变量 搜索栏搜索：查看高级系统配置

image.png

image.png

用户变量path中添加刚刚安装的yarn的路径 文件位置在一开始安装的nodejs文件夹中node_global\node_moudulues文件夹中，地址取到bin结束

image.png

image.png

image.png

环境配置修改完成后重新cmd打开窗口，不然还是会一直报前面同样的错误。（新手踩到的坑） 此时再检查版本就可以显示了。

3.安装Vue-cli

cmd打开命令提示符窗口，输入cnpm install vue-cli -g 全局安装

cnpm install vue-cli -g

检查版本，注意V大写，我自己试过小写报错，能够显示版本号及安装成功。

vue -V

接着安装Webpack 输入 cnpm install webpack -g 到这里准备工作就完成了，就可以开始正式搭建项目了。

开始搭建

在想要创建项目的文件地址栏里选中地址后输入cmd后回车，打开命令行窗口 比如我想在2023里创建一个名为test的项目，打开命令行窗口后输入vue init webpack name 回车两次 image.png 接着会依次出现一些交互信息需要填写或选择。 项目名称，如果用test就直接回车，否则输入新的项目名。

image.png

接着是：

  • Project description：项目的描述内容，可以自定义一些内容。
  • Author: 作者，可以写上自己的邮箱或者GitHub的地址。
  • Vue build：打包的方式，这里直接回车即可。
  • Install vue-router? (Y/n)：是否安装Vue路由，建议选择Yes，一般项目都需要路由功能。
  • Use ESLint to lint your code? (Y/n)：是否启用ESlint检测，选择不启用。
  • Set up unit tests (Y/n)：是否需要单元检测，建议选择不需要。
  • Setup e2e tests with Nightwatch?(Y/n)：是否需要端对端的检测，建议选择不需要。

选完就开始搭建 image.png

项目基本模板就搭建完成 image.png

安装依赖包并启动项目

继续输入

cd test 
//进入项目文件夹
cnpm intall
//安装依赖包
npm run dev
//运行项目

image.png

image.png

打开浏览器输入http://localhost:8080/#/ 显示下图就说明项目运行成功。

image.png

以上就是我成功的过程啦!!!!! 整了几个小时才成功太不容易啦!!!!!! 基于vue2.x 安装vue router npm install vue-router@3

安装vuex npm install vuex@3 --save

安装axious

npm install axios

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

avatar
文章
阅读
粉丝