Giter Site home page Giter Site logo

Comments (8)

YaoZeyuan avatar YaoZeyuan commented on June 29, 2024

推荐是用 npm install 安装js包，然后在需要的组件里import进来
像
src/view/blog/index.js/src/view/blog/index.js，
或者
src/view/blog/components/list/article_list.vue
一样

css的话，一般直接引用就可以了吧，路径写全就行

from vue-multi-page.

YaoZeyuan avatar YaoZeyuan commented on June 29, 2024

这是我们后台的index.html模版，使用的bootstrap的css，可以正常使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/favicon.ico">

    <!-- css for AdminLTE -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/jvectormap/2.0.4/jquery-jvectormap.min.css" rel="stylesheet">
    <!-- Theme style -->
    <link href="//cdn.bootcss.com/admin-lte/2.3.5/css/AdminLTE.css" rel="stylesheet">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
    <link href="//cdn.bootcss.com/admin-lte/2.3.5/css/skins/_all-skins.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <title>后台</title>
</head>

<body class="sidebar-mini skin-blue-light">
<div class="wrapper">
    <div class="content-wrapper" style="min-height: 901px;">

        <div class="row">
            <div class="main">
                <div id="app"></div>
            </div>
        </div>

    </div>

</div>

<script>
    // AdminLTE配置项
    var AdminLTEOptions = {
        //General animation speed for JS animated elements such as box collapse/expand and
        //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
        //'fast', 'normal', or 'slow'
        animationSpeed: 'fast',
    };
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- FastClick -->
<script src="//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="//cdn.bootcss.com/admin-lte/2.3.5/js/app.min.js"></script>
<!-- Sparkline -->
<script src="//cdn.bootcss.com/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<!--
 暂时用不到，注掉
<script src="//cdn.bootcss.com/jvectormap/2.0.4/jquery-jvectormap.min.js"></script>
<script src="//cdn.bootcss.com/Chart.js/2.2.2/Chart.js"></script>
-->
<!-- SlimScroll 1.3.0 -->
<script src="//cdn.bootcss.com/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>

</body>

</html>

from vue-multi-page.

HongHaiyang avatar HongHaiyang commented on June 29, 2024

我最一开始遇到问题的时候把css和js放在base.vue里面import进去了

<style scoped>
  @import url('../../../../static/media/vendor/fontawesome/css/font-awesome.min.css');
  @import url('../../../../static/media/vendor/simple-line-icons/css/simple-line-icons.css');
  @import url('../../../../static/media/vendor/bootstrap/dist/css/bootstrap.css');
  @import url('../../../../static/media/css/app.css');
  @import url('../../../../static/media/css/eniw.css');
</style>
<script>
  import '../../../../static/media/vendor/modernizr/modernizr.custom.js'
  //  import '../../../../static/media/vendor/jquery/dist/jquery.js'
  import '../../../../static/media/vendor/bootstrap/dist/js/bootstrap.js'
  //  import '../../../../static/media/vendor/jQuery-Storage-API/jquery.storageapi.js'
  //  import '../../../../static/media/vendor/screenfull/dist/screenfull.js'
  import '../../../../static/media/vendor/sparkline/index.js'

这样的话样式基本都能显示。

之后一直在搞别的，后来看了您的回复，我回去后试了把css和js 链接就放在index.html里面，css和js文件放在 src/lib/js 和src/lib/css 中

<!DOCTYPE html>
<html lang="zh-CN">
<link rel="stylesheet" href="../../lib/css/font-awesome.min.css">
<link rel="stylesheet" href="../../lib/css/simple-line-icons.css">
<link rel="stylesheet" href="../../lib/css/bootstrap.css" id="bscss">
<link rel="stylesheet" href="../../lib/css/app.css" id="maincss">
<link rel="stylesheet" href="../../lib/css/eniw.css">
<head>
    <title>Dashbord</title>
</head>

<body>
<div id="app"></div>

<script src="../../lib/js/modernizr.custom.js"></script>
<script src="../../lib/js/jquery.js"></script>
<script src="../../lib/js/bootstrap.js"></script>
<script src="../../lib/js/jquery.storageapi.js"></script>
<script src="../../lib/js/screenfull.js"></script>
<script src="../../lib/js/index.js"></script>
<script src="../../lib/js/app.js"></script>
<!--<script src="src/js/html/dashboard.js"></script>-->
</body>
</html>

然后 npm run dev之后报错，找不到这些文件
image

from vue-multi-page.

ameibj avatar ameibj commented on June 29, 2024

1.我遇到的问题是，发现build 后，dist 生成的html 引入的是cdn的 文件，我希望引入的还是静态路径的地址，这样应该怎么配置调整呢？
2. map.json 里的那些JS 的cdn路径是怎么生成的呢？看您文档没看到

from vue-multi-page.

YaoZeyuan avatar YaoZeyuan commented on June 29, 2024

@ameibj map.json是由build/plugin/webpack/generate_map_json.js 这个文件生成的，cdn路径在/config/index.js的build: assetsPublicPath里进行配置

dist里的html除了自动生成的app.js之外，其他代码都是直接从项目的html模板里复制过来的，如果要改的话直接改模板就行

from vue-multi-page.

ameibj avatar ameibj commented on June 29, 2024

谢谢，我知道了！我如果要使用静态的路径把 assetsPublicPath: 'http://staticdemo.yaozeyuan.online', // 静态地址前缀，使用网址以便对外发布
改为 assetsPublicPath: ‘’ ‘’就可以了吧

from vue-multi-page.

YaoZeyuan avatar YaoZeyuan commented on June 29, 2024

@HongHaiyang src目录里的文件只能作为js库import，如果想作为一个单独的文件对外发布的话还是要把他们放到static文件夹里才行

from vue-multi-page.

HongHaiyang avatar HongHaiyang commented on June 29, 2024

from vue-multi-page.

Related Issues (6)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.