美文网首页前端vue
vue项目搭建成功开发项目细节详解

vue项目搭建成功开发项目细节详解

作者: 前端的爬行之旅 | 来源:发表于2018-07-04 14:35 被阅读91次

    1.更改端口

    更改完端口号重启项目即可。


    image.png

    2.安装依赖包

    • 方法一:直接在终端工具中输入需要安装的依赖包的命令行
    npm install vuex --save
    
    • 方法二:在package.json中对应的位置定义好依赖插件名称及版本号,输入命令行即可
    npm install
    
    image.png

    3.更改打包之后的文件夹名称

    输入命令行即可打包

    npm run build
    

    打包之后默认的文件名称是dist
    更改打包文件名称方式如下


    image.png
    image.png

    4.npm run dev已经成功启动 无法访问 Invalid Host header

    详解借鉴:https://www.jianshu.com/p/74546bdb3b02
    在 webpack.dev.conf.js 中添加 disableHostCheck: true,

    image.png

    5添加全局依赖文件

    可以在build中建立一个js文件:例如global.js
    gloab.js的作用:汇总所有需要全局依赖的文件。


    image.png

    在webpack中引入和注册,在全局中则不需要重新定义,直接引用即可,例如Pop.method()等


    image.png
    image.png

    6webpack打包根据不同环境区分不同的模板

    image.png

    vue-cli+webpack生成默认是index.html


    image.png

    7vue项目中的proxy代理

    image.png
    image.png

    相关文章

      网友评论

        本文标题:vue项目搭建成功开发项目细节详解

        本文链接:https://www.haomeiwen.com/subject/qwljuftx.html