个人对新建vue项目的操作（闲谈）

Vue.js官网开发实践与技巧

原创已于 2025-02-18 09:22:59 修改 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #elementui #npm #前端 #vue.js

于 2022-06-07 16:36:36 首次发布

前端学习同时被 2 个专栏收录

2 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文记录了一位开发者在使用Vue.js构建公司官网时的经验，包括Vue的优点和缺点，如单页面应用的便捷性和SEO问题。重点介绍了如何处理ES6语法兼容性问题，通过引入babel-polyfill，并提供了引入方式。同时，分享了路由懒加载的实现，以优化项目性能，以及build打包配置的调整，如设置productionSourceMap为false。此外，还探讨了通过CDN引用库来减小打包后的JS文件大小，但指出这种方式不适合需要离线运行的项目。

最近在做公司的官网，框架是vue。

优点：单页面应用，比较简单，容易上手，各种插件等也是比较丰富；

缺点：对于seo方面不太友好,大型项目不太适合。

以下是我从新建项目开始记录的一些操作，目前也是学习中，有不对的地方欢迎指正，拜托！

vue-cli常用的命令：

vue init webpack 项目名称

vue create 项目名称 //可以选择vue2或者3

npm create vue@latest //安装vue3

1、vue对es6的处理方式

网页在浏览器中运行不可避免的会碰到老大哥IE浏览器，或者不支持es6的版本，我所做的就是简单的安装babel-polyfill。

安装方法：npm install --save babel-polyfill

npm install --save babel-polyfill

安装完成后的引用方法，可以根据自己情况进行引用；
1.require("babel-polyfill");

2.main.js文件
import "babel-polyfill";

3.build文件夹中 webpack.base.conf.js文件
module.exports = {
　entry: ["babel-polyfill", "./app/js"]
};

2、build打包配置文件的修改

个人觉得这个操作就是随手做下就行，config下的index.js文件修改，productionSourceMap改成false，打包后不生成map文件。

productionSourceMap: true,

3、路由懒加载

将原本的路由如下图，

可以改成路由懒加载见代码如下

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router =  new Router({
    mode:'history',
    base:'/',
    routes: [
        {
            path: '/',
            component: (resolve) => { require(['../components/HelloWorld.vue'], resolve) },
            name: 'HelloWorld',
        },
       
    ]
})
export default router

4、cdn引用

在index.html页面通过cdn引用减少打包后js文件过大，需要联网的项目，就不要用这个方式了。

externals: {
  'element-ui': 'ELEMENT',
  'vue': 'Vue',
  'querystring':'Qs',
  'vue-router': 'VueRouter',
  'MuseUI': 'MuseUI',
  'axios':'axios',
  'jquery': "jQuery",
  "EXIF":'EXIF',
  'echarts': 'echarts'
},