VUE2 项目开发记录参考

发表于 更新于 分类于 ， 阅读次数： 本文字数： 7k 阅读时长 ≈ 6 分钟
VUE2 项目开发记录参考，主要介绍vue2项目的搭建，初始化，以及ElementUI

VUE2 项目开发记录参考

依赖环境安装搭建

  • nodejs

    下载地址： https://nodejs.org/zh-cn/download/releases/

  • 版本查看：

  • 安装国内镜像：

    1
    npm install -g cnpm --registry=http://registry.npm.taobao.org

  • 安装vue脚手架（全局）

    vue-cli 3或4安装方式

    1
    npm install -g @vue/cli

    vue-cli 2版本的安装方式

    1
    npm install -g vue-cli

新建vue项目

  • 命令行运行： testvueapp为项目名称

    1
    2
    3
    4
    vue3：新建vue3项目，或使用vue ui，在网页端可视化设置

    vue create my-project
    vue ui
    1
    2
    3
    vue2：目前项目使用vue2的结构框架

    vue init webpack testvueapp

    Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写
    Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
    Author：作者，如果你有配置git的作者，会读取。
    Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
    Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n（建议）。
    setup unit tests? 是否需要安装单元测试工具。
    Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n

  • 项目结构（vue2）

    使用vscode或IDEA打开项目，项目结构如下：

    目录/文件 说明
    build 项目构建(webpack)相关代码
    config 配置目录，包括端口号等
    node_modules npm 加载的项目依赖模块
    src/assets 放置一些图片，如logo等
    src/components 目录里面放了一个组件文件，可以不用。
    src/App.vue 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
    src/main.js 项目的核心文件。
    static 静态资源目录，如图片、字体等。
    test 初始测试目录，可删除
    index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
    package.json 项目配置文件。
    README.md 项目的说明文档，markdown 格式

开发规范参考

普通前端书写规范

百度前端规范

https://www.bookstack.cn/read/ecomfe-spec/css-style-guide.md

腾讯前端规范

https://tgideas.qq.com/doc/frontend/spec/common/

目录

建议在src目录下，新建每部分的文件夹，分类编写组件

  • .vue类型文件结构
    • template：html元素
    • script：js代码，vue生命周期函数
    • style：css样式 / 全局样式建议写在App.vue或Home.vue中，统一管理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<template>
  <div class="page-all">
    
  </div>
</template>

<script>

export default {
  name: "Demo",
  props: [""],
  data() {
    return {}
  },
  components: {},
  methods: {},
  mounted() {
  },
  computed: {},
  created() {

  },
  destroyed() {

  },
  beforeDestroy() {

  },
  watch: {//使用watch 监听
    // xxx: {
    //   handler(newVal, oldVal) {
    //     console.log("更新！");
    //
    //   },
    //   deep: true //对象内部属性的监听，关键。
    // },
  },
}
</script>

<style scoped>

.page-all {
  height: 100%;
}

</style>

<style>

</style>

组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
名称：
建议驼峰命名 App MyApp

引用方式：
1. import Home from './components/Home.vue'
   components: { Home },
   
2. components: {
     Home: resolve => {require(['@/components/Home.vue'], resolve)},
   },

使用：
<template>
...
  <Home></Home>
</template>

插件

UI插件

目前使用ElementUI作为基础UI库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
安装：命令行运行
npm i element-ui -S
npm i --save ant-design-vue

引用：建议在main.js中全局引用
// Vue使用ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/base.css';
Vue.use(ElementUI)

//引入ant design
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd)

使用：在具体组件中使用
<el-button type="primary">主要按钮</el-button>
<a-button type="primary">Primary</a-button>

具体使用请参考官网文档，点击如上链接
图表插件 Echarts
1
2
3
4
5
6
7
安装命令

echarts
npm install echarts --save

vue-echarts插件
npm install vue-echarts --save
1
2
3
4
package.json查看版本，目前已经更新到5.x.x

"echarts": "^5.0.2",
"vue-echarts": "^5.0.0-beta.0",
1
2
3
4
5
6
7
8
main.js中引用

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue
// 注册组件后即可使用
Vue.component('v-chart', ECharts)
1
2
组件中：
<v-chart :options="polar" autoresize></v-chart>

echarts官方样例地址：https://echarts.apache.org/examples/zh/index.html

echarts官方文档配置：https://echarts.apache.org/zh/option.html#title

vue-echarts官方文档地址：https://github.com/ecomfe/vue-echarts/blob/main/README.zh-Hans.md

配置文件设置

  • config/index.js

    proxyTable：开发环境下的跨域设置
    host：设置为0.0.0.0
    build下assetsPublicPath：打包路径修改，防止出现空白页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/db': {
        target: "http://localhost:18080", // API服务所在IP及端口号
        changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
        pathRewrite: {
          '^db': '/db',
          //'^/api': '/api'    这种接口配置出来     http://XX.XX.XX.XX:8083/api/login
          //'^/api': '/' 这种接口配置出来     http://XX.XX.XX.XX:8083/login
        }
      },
      
    },

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

  • build/utils.js

    publicPath：修改打包后图片路径不对的问题

1
2
3
4
5
6
7
8
9
10
11
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

路由

1
2
组件中：添加一级路由
<router-view/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})