前端vue-cli 3.0开发基础总结

vue-cli是一个基于Vue.js的项目脚手架,可以帮助我们快速的搭建vue.js项目。之前我们已经总结了在vue-cli 2.*下开发前端所需要做的工作,包括开发用到的组件,访问权限控制等等。最近看了官方3.0版本的介绍,发现在3.0版本下的脚手架相对于之前2.0的版本使用起来就显得更加简洁,主要去除了build以及config目录,就让整个工程目录更加清晰易懂,当然整体与2.0还是有一些区别。到这里总结一下,虽然我们技术不是最牛的,但是软件我们就是要用最新的。于是我就将vue-cli 3.0版本用在了最近的几个新项目里。这里就来说说使用vue-cli 3.0版本需要做的工作,算是个总结。


1. 安装vue-cli 3.0

首先,新的脚手架是需要node.js 8.9+的,这里我就是在安装的时候,提示我node.js的版本不够。因此当Node版本不够时,我们就需要重新安装Node。当然了,直接在官网下载新版本,在本地覆盖安装就可以了。

更新好Node,接下来就可以愉快的安装vue-cli 3.0了:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue-cli 3.0安装

可以用一条命令来查看版本:
vue --version


2. 创建项目

创建项目的方式有两种,一种是命令行创建项目:
vue create story-web
这里story-web就是我们的项目名。

vue-cli 3.0创建项目

还有一种是UI图形界面创建:
vue ui
这一种就不多说了,只要按照步骤走就可以了。UI界面还是比较强大,可以直接在界面中管理项目依赖,安装卸载都可以做。

当然项目创建完成以后,就需要安装依赖,安装依赖的方式跟以前一样,这里就不再说了。
启动项目命令也有改变:
npm run serve
为什么是serve?看看package.json就知道了,从之前的dev改成了serve


3. 配置vue.config.js

在创建的项目文件里是没有config文件的,这个地方就需要我们自己添加,当然,没有config文件,项目也是可以启动的,只是当有一些默认的配置需要修改的时候,这里的config文件就是必要的了,这里提供了一个config的文件,出处来自哪里已经不记得了。

// vue.config.js 配置说明
// 这里只列一部分,具体配置参考官方文档
module.exports = {
    // baseUrl  type:{string} default:'/' 
    // 将部署应用程序的基本URL
    // 将部署应用程序的基本URL。
    // 默认情况下,Vue CLI假设您的应用程序将部署在域的根目录下。
    // https://www.my-app.com/。如果应用程序部署在子路径上,则需要使用此选项指定子路径。例如,如果您的应用程序部署在https://www.foobar.com/my-app/,集baseUrl到'/my-app/'.

    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

    // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'

    // outputDir: 'dist',

    // pages:{ type:Object,Default:undfind } 
/*
  构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
  个对象,其中键是条目的名称,而该值要么是指定其条目、模板和文件名的对象,要么是指定其条目
  的字符串,
  注意:请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
*/
    // pages: {
        // index: {
            // entry for the page
            // entry: 'src/index/main.js',
            // the source template
            // template: 'public/index.html',
            // output as dist/index.html
            // filename: 'index.html'
        // },
        // when using the entry-only string format,
        // template is inferred to be `public/subpage.html`
        // and falls back to `public/index.html` if not found.
        // Output filename is inferred to be `subpage.html`.
        // subpage: 'src/subpage/main.js'
    // },

    //   lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
    lintOnSave: true,
    // productionSourceMap:{ type:Bollean,default:true } 生产源映射
    // 如果您不需要生产时的源映射,那么将此设置为false可以加速生产构建
    productionSourceMap: false,
    // devServer:{type:Object} 3个属性host,port,https
    // 它支持webPack-dev-server的所有选项

    devServer: {
        port: 8080, // 端口号
        host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
        proxy: {
            '/lms/login':{
                target: 'http://localhost:8090',
                changeOrigin: true,
                pathRewrite: {
                  '^/lms': ''
                }
            },
            '/lms': {
                target: 'http://localhost:8090',
                changeOrigin: true
            }
        }
    },
    chainWebpack: config => {
        const svgRule = config.module.rule('svg') 
        // 清除已有的所有 loader。 
        // 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。 
        svgRule.uses.clear() 
        // 添加要替换的 loader 
        svgRule 
            .use('vue-svg-loader') 
            .loader('vue-svg-loader')
            .options({ symbolId:'icon-[name]' }) 
    }
}

chainWebpack 代码中的配置就是我们新增的,用于支持svg图片格式的处理,其实效果和2.0版本下的配置是一样的,只是这里换成了官方规定的链式操作。
proxyTable的代理配置也是保持不变的。
其他的具体配置还是以官方文档为主。


4. 环境变量ENV

关于环境变量,这里其实就是我们配置的一些参数。当我们运行npm run serve时,实际上启动的是development模式。在这个模式下,倘若在此模式下和生产product环境下的一些配置参数不一样,那么这里的环境变量就起到作用了。

来看下官方的说明吧,这样或许就一目了然了:

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

举个栗子:development模式下,会加载.env,.env.local,.env.development,.env.development.local环境变量。
相应的,product模式下,会加载.env,.env.local,.env.product,.env.product.local环境变量。
清楚了吧,而这些环境变量.env文件正是我们要手动创建的。

NODE_ENV=development
VUE_APP_SSO_LOGIN=http://localhost:8080/sso/login
VUE_APP_SSO_LOGOUT=http://localhost:8080/sso/logout
VUE_APP_SSO_APP_CALBACK=http://localhost:8080/sys/syslogin
VUE_APP_SSO_APP_LOGOUTCALBACK=http://localhost:8080/logout
VUE_APP_KAPTCHA_SWITCH=false

还有一点,自定义的环境变量要以VUE_APP_开头,这样,才可以在我们的业务代码中使用如:

window.location.href= process.env.VUE_APP_SSO_LOGIN+ "&service="+process.env.VUE_APP_SSO_APP_CALBACK

5. 安装Font-Awesome 5

关于使用第三方的图标库还确实走了点弯路,按照之前我们引入4.5版本的font-awesome方式,始终无法加载。于是尝试了加载5.*的版本才能显示出图标。这里要在main.js中添加引用:

//引入font-awesome
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'

fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)

//...

Vue.component('font-awesome-icon', FontAwesomeIcon)

使用的方式,我们就还是保持之前的姿势:

<i class="fa fa-align-justify"></i>

好了,其实到这里,上面所列的就简单的总结了开发环境下和vue-cli 2.0版本的一些区别,对于在vue-cli 3.0下做基本的开发已经是没有问题了,结合之前2.0的经验,应该会很快上手。当然在以后的使用中还有遇到其他的一些再来总结了。


6. 参考资料

  1. vue-cli官网

发表评论

电子邮件地址不会被公开。 必填项已用*标注