IDEA新建Vue项目

一.安装Node.js

下载地址：https://nodejs.org/en/download/。下载完成后默认安装，安装完成后打开cmd （用管理员权限，之后需要。用IDEA的Terminal也可以，打开IDEA时也要用管理员权限打开）

输入下面的命令查看是否成功安装。

node -v

npm -v

配置npm在安装全局模块时的路径和缓存cache的路径：

在node.js安装目录 (C:\Program Files\nodejs) 下新建两个文件夹 global和cache，然后在 cmd命令下执行如下两个命令：

npm config set prefix “C:\Program Files\nodejs\global”

npm config set cache “C:\Program Files\nodejs\cache”

然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”，

值为“C:\Program Files\nodejs\global”

二.安装Vue脚手架工具(vue-cli)

首先安装npm的淘宝镜像,输入以下的命令

npm i -g cnpm --registry=https://registry.npm.taobao.org
           

下载完成以后，安装vue的脚手架工具，输入以下命令

npm i -g vue-cli
           

测试是否安装成功：

vue -V
           

三. 新建Vue项目

1.右键管理员权限打开IDEA,新建一个空项目

注意，IDEA会提示是否导入新的Module,可以选择取消不导入。

2.在setting中配置JavaScript的语言版本为6

3.在file types的html中添加.*vue

4.在插件库中添加vue.js插件

5.在新建的项目目录下初始化项目

在命令行输入

vue init webpack project-name

然后执行 npm install (如果不用管理员权限打开会报错)

执行之后就可以运行 npm run dev

浏览器查看

6.此时会发现项目的目录结构不存在

此时将打包好的项目导入

四.使用Vuetify

Webpack 安装

命令行输入

npm install vuetify

图标安装

npm install sass sass-loader fibers deepmerge -D

安装好为 Vuetify 创建一个包含以下内容的插件文件，src/plugins/vuetify.js：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)
           

***引入：***实例化 Vue 实例并将 Vuetify 对象作为选项传递进来。

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')
           

具体的控件使用参考官方文档即可。