【Vue】项目创建教程

76 阅读2分钟

Vue

npm 报错

错误一 CERT_HAS_EXPIRED

如果你在使用 npm 安装的时候遇到了这个报错,那大概率就是你的npm源地址过期了,你需要重新更换一下。

image.png

npm 换源

终端指令:npm config get registry ---> 查看当前源地址

image.png

终端指令 --- > 修改你的源地址

npm config set registry https://registry.npm.taobao.org //换位淘宝

npm config set registry https://mirrors.huaweicloud.com/repository/npm //换位华为

Vue 安装脚手架

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 nnvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

终端指令 npm install -g @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

版本

vue --version

升级

npm update -g @vue/cli

Vue 创建项目

通过 vue create 方式创建

vue create hello-world

image.png

这里会提示你是否更换一个更快的nopm源,我们都可以。我选择的是 yes

image.png

三种创建方式:

  • 默认套餐,vue2版本,提供babel和eslint支持。
  • 默认套餐,vue2版本,提供babel和eslint支持。
  • 自定义创建,自己去选择需要的功能,提供更多的特性选择。比如如果想要支持 TypeScript ,就应该选择这一项。

自定义选项的话,要了解一下下面的内容

vue-cli 内置支持了8个功能特性,可以多选:使用方向键在特性选项之间切换,使用空格键选中当前特性,使用 a 键切换选择所有,使用 i 键翻转选项。

对于每一项的功能,此处做个简单描述:

Choose Vue version:选择版本 Babel:支持es6 转 es5 TypeScript:支持使用 TypeScript 书写源码。 Progressive Web App (PWA) Support:PWA 支持。 Router:支持 vue-router 。 Vuex:支持 vuex 。 CSS Pre-processors:支持 CSS 预处理器。 Linter / Formatter:支持代码风格检查和格式化。 Unit Testing:支持单元测试。 E2E Testing:支持 E2E 测试。

image.png

在这里如果遇到了 log-level 相关的报错,就在指令前面加上 sudo, 用管理员身份运行。

image.png

这是创建好的样子。

可以 cd 进目录,然后通过 npm run serve 指令,开始初始化,并打开项目

通过脚手架方式创建

使用vue初始化基于webpack的新项目:

vue init webpack my-project

通过网页端创建

终端指令 ---> vue ui

运行后,打开浏览器,你会看到网页创建的相关操作指示

npm run serve

我们 cd 进项目目录后,然后 npm run serve

image.png

通过浏览器打开本地这个ip

- Local:   http://localhost:8080/

image.png

至此,你的第一个vue 项目 创建成功!