安装

有三种安装方法

从vue官方下载

使用cdn：

<scriptsrc="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">

NPM方法

需要先安装node

安装cnpm（cnpm是淘宝的npm中国镜像，使用方法跟npm一样，只需要把npm换成cnpm即可）

• sudo npm install cnpm -g

安装vue

• cnpm install vue

查看版本

• cnpm -v

vue使用

在工作目录下

全局安装 vue-cli

• cnpm install --global vue-cli

创建一个基于 webpack 模板的名字叫 --my-project-- 的新项目，这里可以一路回车默认就行

• vue init webpack my-project

提示安装完成
进入项目安装并运行：

• cd my-project
• sudo cnpm install
• sudo cnpm run dev

浏览器：http://localhost:8080

整合到java的项目中

• sudo cnpm run build

会在目录下生成一个dist文件。里面的index.html和static放到项目中就可以了。

vue 关闭检查提醒

函数空格提醒

修改.eslintrc.js如下

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    //关闭检查提示
    //'@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'space-before-function-paren':0
  }
}

修改vscode的格式化代码规则

• 格式化快捷键：mac：alt+shift+f

项目根目录创建.prettierrc文件，增加内容如下

{
    "semi" : false,
    "singleQuote" : true
}

vue + elementui

安装elementui

进入项目目录，打开终端

• cnpm i element-ui -S

main.js导入组件和样式

导入后的main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

另一种安装elementui方式

• 插件配置!

[截屏20200219下午9.49.56.png]

Vue 脚手架

mac安装

• sudo cnpm install -g @vue/cli

检查版本号

• vue -V

快速初始化一个vue项目

• vue ui

会自动在浏览器中打开页面，然后就可以进行配置项目
点击创建后

项目名要小写

首次建议手动配置

选择功能

设为预设，以后建项目就可以使用预设了

下载一段时间后进入仪表盘

运行项目
点击开始，就可以运行项目

点击 --- 启动--- 就可以自动在浏览器中打开页面

项目目录结构

配置

在package.json中加入配置代码，改变端口，运行项目后自动打开网页

{
  "name": "test-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/eslint-config-standard": "^5.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.1.2",
    "vue-template-compiler": "^2.6.11"
  },
  "vue":{
    "devServer":{
      "port":8888,
      "open":true
    }
  }
}

• 上面是加完代码后的package.json

• 保存项目
• vscode打开控制台：command+shift+Y
• 切换到项目目录下
• cnpm run serve