VUE2 项目开发记录参考

anjushi_

已于 2022-03-08 10:31:08 修改

阅读量751

点赞数

分类专栏：前端 # vue 文章标签： vue.js 前端 javascript

于 2022-02-22 15:21:33 首次发布

本文链接：https://blog.csdn.net/qq_23858785/article/details/123068527

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

vue

18 篇文章 1 订阅

订阅专栏

VUE2 项目开发记录参考

依赖环境安装搭建

nodejs

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

安装国内镜像：

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

安装vue脚手架（全局）

vue-cli 3或4安装方式
```
npm install -g @vue/cli
```
vue-cli 2版本的安装方式
```
npm install -g vue-cli
```

新建vue项目

命令行运行： testvueapp为项目名称
```
vue3：新建vue3项目，或使用vue ui，在网页端可视化设置

vue create my-project
vue ui
```
```
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 格式

开发规范参考

1.普通前端书写规范

百度前端规范

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

腾讯前端规范

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

2.目录

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

.vue类型文件结构
- template：html元素
- script：js代码，vue生命周期函数
- style：css样式 / 全局样式建议写在App.vue或Home.vue中，统一管理

<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>

3.组件

名称：
建议驼峰命名 App MyApp

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

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

4.插件

UI插件：目前使用ElementUI作为基础UI库
（1） ElementUI
（2） Ant Design Vue

安装：命令行运行
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

安装命令

echarts
npm install echarts --save

vue-echarts插件
npm install vue-echarts --save

package.json查看版本，目前已经更新到5.x.x

"echarts": "^5.0.2",
"vue-echarts": "^5.0.0-beta.0",

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)

组件中：
<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

5.配置文件设置

config/index.js

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

'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：修改打包后图片路径不对的问题

    // 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)
    }

6.路由

组件中：添加一级路由
<router-view/>

/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
    }
  ]
})