liujijiang

vue

2020.02.20

安装

有三种安装方法

从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导入组件和样式
截屏20200219下午9.37.07.png
导入后的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方式

截屏2020-02-19下午9.48.27-f126db13d30c4b738ff48cbacc171228


  • 插件配置!

[截屏20200219下午9.49.56.png]截屏2020-02-19下午9.49.56-c10ce11c028a46fcb7fd255c99be4726

Vue 脚手架

mac安装

  • sudo cnpm install -g @vue/cli

检查版本号

  • vue -V

快速初始化一个vue项目

  • vue ui

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


项目名要小写


截屏2020-02-19下午8.58.13-ac53ed07868b4cc096aca007fd486258


首次建议手动配置

截屏2020-02-19下午8.59.00-d792edc3d08c412d82155b1c6d10ebe3

选择功能

截屏2020-02-19下午8.59.46-6be95b0fb8f9452691e818dc6ed6df42

截屏2020-02-19下午8.59.53-84bf40e0b91b4746a07ddf1491c4001e

截屏2020-02-19下午9.00.24-274a6ae30988458f99b117442fbebb35

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

截屏2020-02-19下午9.01.32-dceb64dbbfb64e12aea4ca06260c7cc5

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

截屏2020-02-19下午9.03.23-847f2bbb672b43d1b87b0e4893cc8739

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

截屏2020-02-19下午9.04.06-672b2e26fc664beb8b51aa613185b222

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

截屏2020-02-19下午9.17.01-3d46fd1456fd4bd5b5621f4483ed8195

项目目录结构


截屏2020-02-19下午9.16.43-b23dca709a094a4089e38126597efdde

配置

在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