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