安装+新建 vuetify 项目

安装+新建 vuetify 项目

  • 安装 node.js
  • 安装 Vue-cli
  • 使用 vue ui 安装 vuetify
  • 测试使用

安装 node.js

  1. 安装+配置 node.js

安装 Vue-cli

  1. 安装 vue cli
npm install -g @vue/cli
  1. 测试是否能使用 vue 命令
vue --version
@vue/cli 4.5.13
  1. 若能使用 vue 命令,跳到第 6 步,若不能使用 vue 命令
    添加 vue.cmd 所在路径到环境变量,“C:\nodejs\node_global”。
    该路径为配置 nodejs 时全局安装的安装路径,可以通过 npm config set prefix "C:\nodejs\node_global"设置。
    测试是否可以使用 vue 命令
  2. 若依然不能使用 vue 命令,管理员打开 powershell,输入
get-ExecutionPolicy

若显示

Restricted

输入

set-ExecutionPolicy RemoteSigned

测试 vue --version 是否能使用

使用 vue ui 安装 vuetify

  1. 用 vue UI 安装 vuetify
    terminal 中输入
vue ui
  1. 在 Vue Project Manager 中点 create 新建一个项目
    选择项目路径
    填项目名
    Select a preset 选择 Manual
    Features 选择如图
    安装+新建 vuetify 项目_第1张图片
    Save as a new preset 选择 continue without saving
    项目创建完成后
  2. plugin 里面搜 vuetify,然后安装
    chosse a preset 选默认

测试使用

安装完 vuetify 后 terminal 进入项目根目录下开启服务

npm run serve

安装+新建 vuetify 项目_第2张图片
浏览器中打开 http://localhost:8080
安装+新建 vuetify 项目_第3张图片
Reference
Vue+Vuetify 快速入手

你可能感兴趣的:(vue.js)