vue项目搭建

268 阅读1分钟

安装node环境

  1. 官网:nodejs.org/zh-cn/ ,直接下载与电脑系统匹配的msi文件安装。
  2. 查看是否安装成功,终端输入:node -vnpm -v

image.png

  1. 注册并使用淘宝镜像。因为使用官网的镜像比较慢,一般国内都使用淘宝镜像。可以使用npm源管理工具,这里以nrm为例子,它可以帮助我们快速查看和切换npm源。
// 安装nrm
npm install -g nrm

// 查看nrm版本
nrm -v

// 注册淘宝镜像
nrm add taobao https://registry.npm.taobao.org/

// 查看所有源
nrm ls

// 切换淘宝源
nrm use taobao

image.png

创建vue项目

  1. 安装vue-cli。终端输入npm install -g vue-cli,全局安装vue-cli。
  2. 如果你想看vue有哪些模版,可以输入vue list查看模版。

image.png

  1. 进入你想要放置项目的文件夹,现基于webpack模版新建一个项目,vue init webpack three.js,这里three.js是你的项目命名,可以根据自身情况命名。

image.png

  1. 最后进入three.js文件夹,运行npm run dev即可启动项目,在浏览器输入http://localhost:8080/#/ 可以看到启动后的项目

image.png

image.png

将本地项目推送至远端仓库

// 创建本地仓库,会在你本地生成一个.git文件夹,看不见的话,可以用输入ls -a查看所有文件,即可看见
git init

// 添加远端仓库
git remote add origin https://gitee.com/XXX.git

// 查看远端仓库
git remote -v

//之后你就可以照常在本地commit代码和push代码到远端

image.png