基础环境
node、npm、vue 、webpack
分别用node -v、npm -v、vue-v
webpack -v去检查版本
在vscode命令行终端,使用npm config list 查看代理是否设置
npm config set proxy=http://用户名:密码@ip:端口
npm config set https_proxy=https://用户名:密码@ip:端口
更换代理使用npm config edit 编辑
一、准备工作
1. 安装node.js和npm
Vue的脚手架是依赖于node.js的,所以无论是安装新版本还是旧版本,我们都要安装node.js,如果你对node.js不熟悉的话,大家可以查看我之前的一篇文章:Vue笔记——node.js入门知识,简要了解一下。
可以直接到node.js官网下载,然后安装node.js
2.安装淘宝镜像
npm install-g cnpm--registry=https://registry.npm.taobao.org
完成之后,我们就可以用cnpm命令代替npm命令来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。
二、安装旧版本脚手架并使用脚手架快速创建项目
使用以下代码在全局下来安装webpack和vue-cli,因为vue脚手架搭建的项目是依赖webpack的,所以一定要安装webpack。
cnpm install webpack -g
cnpm install -g vue-cli
安装完成之后,我们可以使用vue -V和webpack -v命令来查看两者的版本,如果成功显示版本号,说明已经安装成功,注意vue -V中使用大写字母V。
現在我们在电脑的合适位置新建一个文件夹,然后使用cd命令来到这个文件夹,使用vue init webpack my-app命令来初始化我们的vue项目。这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中my-app是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中。注意这里的项目名称不要使用大写字母。
输入完vue init webpack my-app命令之后,命令行窗口还会相继给出几个选项,是让我们重新确定我们项目的名称、项目描述、项目作者以及是否要安装一些组件等信息。项目的名称、项目描述、项目作者大家可以根据实际情况进行设定。是否安装一些组件,建议大家选择no,项目后期需要安装什么组件,我们到时候再进行安装即可。
三、安裝新版本脚手架(vue-cli3)并使用脚手架快速創建項目
如果安裝了舊版本脚手架,我們需要使用npm uninstall vue-cli -g 命令來刪除舊版本的
使用cnpm install -g @vue/cli或者yarn global add @vue/cli 來安裝脚手架
脚手架安裝完成之後,我們要檢查一下webpack是否已經安裝,如果沒有安裝,可以使用cnpm install webpack -g命令安裝
使用webpack -v來檢查是否安裝
現在我们在电脑的合适位置新建一个文件夹,然后使用cd命令来到这个文件夹,使用vue create 項目名稱 命令來創建項目输入vue create vue3-app命令之后,窗口会提示我们是否要安装一些默认组件,选择第二个【Manually select features】,可以进行自定义选择要安装的组件,通过空格键选择要安装的组件,然后回车继续下面的选项。
npm install如果报在 chromedriver 上安装脚本失败就运行下面命令
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
安装后在运行npm install
四、創建Git倉庫
安裝git
進入git官網https://git-scm.com/downloads 按照自己電腦的系統安裝對應的版本
在 本地磁盤中新建文件夾,在該文件夾中,鼠標右鍵選擇git brash here 打開,使用
mkdir home (home為倉庫名稱)創建倉庫
cd \ ...到home目錄使用git init初始化倉庫
使用git remote add origin + 遠程倉庫SSH的URL。