从零搭建vue单文件组件项目

福尔摩斯对我笑 2019-06-05 22936 次 9633条

创建文件

  • App.vue

        <template>
      <div>
        第一个例子
        <div>
          <div>路由区域</div>
          <router-link to="/one">Go to one</router-link>
          <router-link to="/two">Go to two</router-link>
    
          <div>页面区域</div>
            <router-view />
        </div>
      </div>
    </template>
    
  • index.html

    <div ></div>
    
  • main.js

    import Vue from "vue"
    import App from "./App.vue"
    import Router from 'vue-router'
    Vue.use(Router)
    
    const routes = [
      { path: '/one', component: {template: '<div>第一个组件</div>' } },
      { path: '/two', component: {template: '<div>第二个组件</div>' } }
    ]
    
    const router = new Router({
      routes // (缩写) 相当于 routes: routes
    })
    
    new Vue({
      el: "#app",
      router,
      components: {App},
      template: '<App/>'
    })
    
    
  • webpack.config.js

     const path = require('path')
     const webpack = require('webpack')
     const HtmlWebpackPlugin = require('html-webpack-plugin')
     const { CleanWebpackPlugin } = require('clean-webpack-plugin')
     const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    
     module.exports = env => {
       if (!env) { env = {} }
    
       const plugins = [
         new VueLoaderPlugin(),
         new CleanWebpackPlugin(),
         new HtmlWebpackPlugin({
           template: './index.html'
         })
       ]
    
    
    
       return {
         mode: env.production,
         entry: {
           app: './main.js'
         },
         resolve: {
           extensions: ['.vue', '.csss', '.js', '.json'], // 可忽略的后缀
           alias: {
             'vue$': 'vue/dist/vue.esm.js',
             '@': path.join(__dirname, 'src')
           }
         },
         devtool: 'inline-source-map',
         devServer: {
           contentBase: path.join(__dirname, 'dist'),
           compress: true, // 开启gzip压缩
           port: 9000
         },
         module: {
           rules: [
             {
               test: /\.html$/,
               loader: 'html-loader'
             },
             {
               test: /\.vue$/,
               loader: 'vue-loader'
             }
           ]
         },
         plugins,
         output: {
           filename: '[name].min.js',
           path: path.resolve(__dirname, 'dist')
         }
    
       }
     }
    
    
  • package.json

        {
      "name": "d",
      "version": "1.0.0",
      "description": "",
      "main": "一个简单的例子",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
      },
      "author": "weiali.info",
      "license": "ISC",
      "dependencies": {
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^2.1.1",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "vue": "^2.6.10",
        "vue-router": "^3.0.6",
        "vue-style-loader": "^4.1.2",
        "webpack-cli": "^3.3.2"
      },
      "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.6",
        "babel-preset-es2015": "^6.24.1",
        "vue-loader": "^15.7.0",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.33.0",
        "webpack-dev-server": "^3.6.0"
      }
    }
    
    
    

    直接npm run dev启动就好了

标签: 无

非特殊说明,本博所有文章均为博主原创。

头像也是LOGO
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


已有 9633 条评论 1


  1. air max 2019

    Thanks for your whole work on this site. Kim enjoys managing investigations and it’s really obvious why. I hear all concerning the powerful mode you make helpful tips and tricks on the web site and therefore attract contribution from the others about this area of interest then our favorite daughter has always been discovering a great deal. Take pleasure in the remaining portion of the year. You’re doing a useful job.

    回复 2019年10月27日
  2. lebron shoes

    Thanks for your own hard work on this web page. My niece take interest in setting aside time for investigation and it’s really easy to understand why. My spouse and i learn all about the powerful method you provide worthwhile techniques through this blog and as well recommend contribution from website visitors on that idea while our child has always been studying a lot of things. Take pleasure in the remaining portion of the new year. You have been conducting a superb job.

    回复 2019年10月27日
  3. irving shoes

    I simply needed to thank you so much once again. I’m not certain what I could possibly have carried out in the absence of the entire hints provided by you about such problem. It previously was a very troublesome difficulty in my circumstances, however , finding out a well-written approach you solved it took me to weep over delight. Extremely happy for your service and even sincerely hope you realize what a great job you have been doing educating men and women through the use of your website. I am sure you’ve never encountered any of us.

    回复 2019年10月27日
  4. nike epic react

    I needed to send you this very small note so as to thank you very much again on your remarkable information you’ve provided above. It has been certainly unbelievably generous of you to make openly precisely what most of us might have made available for an e-book to make some cash for their own end, especially now that you might have done it if you ever desired. The strategies likewise worked as the fantastic way to be aware that the rest have a similar dreams similar to my personal own to figure out a good deal more on the topic of this condition. I believe there are several more pleasurable times in the future for folks who read carefully your blog post.

    回复 2019年10月27日
  5. air jordan

    Thanks for all your hard work on this blog. My mum delights in setting aside time for investigations and it is easy to understand why. Most of us learn all about the compelling tactic you offer both interesting and useful tips and tricks by means of this web blog and as well as attract contribution from visitors on the theme and our own child is undoubtedly learning so much. Enjoy the remaining portion of the new year. You’re the one carrying out a first class job.

    回复 2019年10月27日
  6. nike air max

    I want to express my love for your kind-heartedness giving support to those people that should have guidance on this important field. Your personal dedication to passing the message along turned out to be especially significant and has in most cases allowed men and women just like me to realize their ambitions. Your entire warm and friendly guideline implies this much a person like me and especially to my peers. With thanks; from everyone of us.

    回复 2019年10月26日
  7. birkin bag

    Thank you a lot for providing individuals with a very remarkable chance to read articles and blog posts from this website. It really is very brilliant plus packed with fun for me personally and my office friends to search your site no less than three times in 7 days to read through the fresh issues you have. And lastly, we’re at all times motivated for the perfect hints served by you. Certain two tips in this post are absolutely the very best I have had.

    回复 2019年10月26日
  8. cheap jordans

    Thanks for all your valuable labor on this site. Kim really likes going through investigations and it’s easy to see why. We notice all concerning the powerful tactic you convey very useful tips and hints by means of your website and therefore welcome response from the others on the area of interest plus my simple princess has always been being taught a whole lot. Enjoy the remaining portion of the year. You are always conducting a glorious job.

    回复 2019年10月25日
  9. kd 11

    A lot of thanks for all of the labor on this website. My mom really loves doing research and it’s obvious why. Most of us know all relating to the powerful way you deliver important thoughts by means of the web site and boost response from the others on this content then our own daughter is without question discovering a whole lot. Take pleasure in the remaining portion of the year. You are conducting a great job.

    回复 2019年10月25日
  10. vans outlet

    I needed to send you the bit of remark to help say thank you the moment again regarding the breathtaking suggestions you have provided in this case. This is certainly incredibly generous with you in giving easily just what most of us would’ve sold for an e book to help make some dough for themselves, most importantly seeing that you could have done it if you considered necessary. These creative ideas as well acted to provide a good way to be sure that most people have the same dreams just like my own to see very much more related to this problem. I am certain there are several more pleasant moments ahead for those who see your site.

    回复 2019年10月25日
  11. coach outlet

    I enjoy you because of all of the effort on this web site. Kate takes pleasure in managing internet research and it’s really easy to see why. I notice all concerning the powerful means you produce great tips and hints by means of your website and as well as recommend contribution from others about this content so our daughter is truly starting to learn a whole lot. Take advantage of the rest of the new year. You’re doing a tremendous job.

    回复 2019年10月25日
  12. air max 97

    Thank you for every one of your hard work on this blog. Kate enjoys going through internet research and it’s really simple to grasp why. My spouse and i know all of the compelling mode you offer practical tips and tricks through the web site and as well attract contribution from people about this subject matter and our favorite child is being taught so much. Have fun with the remaining portion of the year. You are always doing a great job.

    回复 2019年10月24日
  13. fila

    Thank you so much for giving everyone an exceptionally remarkable chance to read critical reviews from this website. It really is so sweet and also full of a lot of fun for me and my office peers to search your blog more than 3 times per week to find out the latest guidance you have got. And lastly, I’m usually amazed with your breathtaking ideas you serve. Selected 2 areas in this article are particularly the best I’ve had.

    回复 2019年10月24日
  14. jordan 13

    I simply had to say thanks yet again. I’m not certain what I could possibly have created in the absence of the type of tactics discussed by you on such field. It was actually a traumatic situation in my view, nevertheless noticing a new specialized style you handled it made me to jump with joy. I’m just grateful for the guidance and even believe you find out what a great job you are always providing training the mediocre ones all through your site. Most likely you’ve never got to know any of us.

    回复 2019年10月24日
  15. kevin durant shoes

    Thank you for all your valuable work on this site. Ellie loves getting into investigations and it’s simple to grasp why. Most people know all regarding the compelling mode you produce invaluable guides via the web blog and even foster contribution from website visitors about this point while our own princess is being taught a great deal. Take advantage of the rest of the year. Your doing a pretty cool job.

    回复 2019年10月23日
  16. supreme hoodie

    Thank you so much for giving everyone an extraordinarily nice chance to read articles and blog posts from here. It’s always very pleasant and also packed with fun for me personally and my office acquaintances to visit your site no less than 3 times in 7 days to study the new guidance you will have. Not to mention, I’m so always astounded with your remarkable pointers served by you. Some two facts in this posting are definitely the most suitable we’ve ever had.

    回复 2019年10月23日
  17. converse shoes

    I enjoy you because of every one of your hard work on this blog. Betty really loves carrying out research and it’s really obvious why. All of us know all of the lively form you make very helpful guidance on your website and therefore boost response from some others about this situation while my simple princess is without question being taught a whole lot. Take advantage of the rest of the year. You have been carrying out a remarkable job.

    回复 2019年10月22日
  18. hermes handbags

    I as well as my guys were actually checking out the good advice on your site and then quickly developed a terrible feeling I never expressed respect to the site owner for those secrets. Most of the people were definitely totally passionate to learn all of them and already have actually been having fun with those things. Thank you for turning out to be so helpful and for considering this form of outstanding useful guides millions of individuals are really eager to understand about. My very own honest regret for not expressing appreciation to you sooner.

    回复 2019年10月21日
  19. moncler coat

    I would like to express my passion for your kind-heartedness in support of people who must have help on the concern. Your real dedication to getting the solution across ended up being incredibly functional and have always helped guys and women just like me to achieve their dreams. Your insightful tutorial implies a great deal to me and somewhat more to my colleagues. Best wishes; from each one of us.

    回复 2019年10月20日
  20. harden shoes

    I have to get across my respect for your generosity in support of those people who should have guidance on your subject matter. Your real dedication to passing the message all around turned out to be surprisingly practical and have without exception made associates much like me to arrive at their pursuits. Your amazing warm and friendly tips and hints denotes this much to me and substantially more to my peers. Many thanks; from each one of us.

    回复 2019年10月19日
  21. jordan 11

    I must get across my respect for your kind-heartedness in support of men who should have guidance on this situation. Your real commitment to passing the message throughout had become wonderfully helpful and have always empowered individuals much like me to achieve their ambitions. The informative help and advice indicates a lot to me and still more to my office workers. Thanks a lot; from all of us.

    回复 2019年10月18日
  22. christian louboutin

    I wanted to create you that little bit of word in order to thank you so much once again on your superb tactics you’ve documented above. It has been quite particularly open-handed of people like you to deliver openly just what a lot of people could possibly have marketed as an electronic book to end up making some profit for themselves, most notably considering that you might have tried it in the event you wanted. These inspiring ideas as well served to become great way to realize that many people have the identical desire much like mine to grasp great deal more pertaining to this matter. I think there are thousands of more fun situations ahead for individuals that read your website.

    回复 2019年10月17日
  23. moncler

    Thanks for your own work on this website. Kim takes pleasure in carrying out investigation and it’s really simple to grasp why. I know all relating to the dynamic tactic you deliver great tricks by means of this web blog and invigorate response from some other people on this article then my girl is discovering a great deal. Take advantage of the remaining portion of the new year. You are always performing a remarkable job.

    回复 2019年10月17日
  24. christian louboutin

    I am just commenting to make you know of the fine discovery my wife’s girl developed studying your web site. She even learned a wide variety of issues, which include what it is like to possess an ideal teaching spirit to have other individuals really easily understand a variety of complex issues. You truly did more than our desires. Thank you for delivering the great, healthy, revealing not to mention easy guidance on your topic to Kate.

    回复 2019年10月16日
  25. yeezys

    Needed to put you a very little note to finally give thanks over again relating to the lovely guidelines you’ve contributed here. This is shockingly open-handed with you to give extensively all that numerous people could possibly have supplied as an ebook to earn some money for themselves, particularly given that you could have done it in the event you wanted. The advice as well acted to be the fantastic way to recognize that many people have the identical passion really like mine to figure out lots more with regards to this issue. I know there are thousands of more pleasant times ahead for people who start reading your blog post.

    回复 2019年10月15日
  26. kyrie 4

    My spouse and i were absolutely fulfilled when Peter managed to complete his studies via the precious recommendations he came across from your site. It’s not at all simplistic just to choose to be handing out tricks people today could have been trying to sell. So we understand we have the writer to appreciate for that. The illustrations you have made, the straightforward blog navigation, the friendships you will make it easier to engender – it’s most amazing, and it’s really facilitating our son in addition to us reason why this concept is exciting, and that is very important. Many thanks for everything!

    回复 2019年10月14日
  27. christian louboutin shoes

    I actually wanted to post a small message so as to say thanks to you for some of the stunning tips and tricks you are placing on this site. My time-consuming internet lookup has at the end of the day been compensated with pleasant strategies to exchange with my colleagues. I ‘d believe that we website visitors actually are undeniably endowed to exist in a good website with very many special individuals with interesting tricks. I feel extremely fortunate to have used your weblog and look forward to many more exciting times reading here. Thanks again for all the details.

    回复 2019年10月13日
  28. yeezy shoes

    My husband and i felt now satisfied that Louis could round up his reports using the precious recommendations he came across from your own weblog. It is now and again perplexing to simply choose to be handing out concepts that men and women may have been trying to sell. We really already know we need you to thank for this. These explanations you’ve made, the simple website navigation, the relationships you can aid to foster – it is all fantastic, and it’s letting our son in addition to us reckon that that topic is pleasurable, and that’s incredibly serious. Many thanks for all the pieces!

    回复 2019年10月12日
  29. nike basketball shoes

    I and also my pals came viewing the best secrets found on your web site while then developed a horrible suspicion I never thanked the website owner for those strategies. My young men were definitely as a consequence stimulated to read through all of them and already have simply been loving these things. Thank you for getting indeed considerate and then for picking varieties of useful resources most people are really wanting to be informed on. Our sincere regret for not saying thanks to you earlier.

    回复 2019年10月11日
  30. cheap nfl jerseys

    I wanted to create you a bit of remark to help say thanks once again on your spectacular principles you’ve contributed here. It has been quite incredibly open-handed with you to present unreservedly just what most of us might have advertised for an electronic book to get some bucks on their own, primarily given that you might well have tried it if you decided. The things additionally worked to be the fantastic way to be certain that most people have a similar fervor just as my personal own to know more regarding this issue. I know there are thousands of more pleasant periods ahead for those who read your site.

    回复 2019年10月10日
  31. yeezy boost 350

    Needed to send you that bit of observation just to give many thanks again relating to the splendid methods you have contributed on this website. It has been certainly unbelievably open-handed with you to supply extensively precisely what many of us would have offered as an electronic book in order to make some cash for their own end, notably since you might well have done it if you desired. These principles also worked to provide a easy way to recognize that someone else have the same desire like mine to learn a great deal more with respect to this issue. Certainly there are many more pleasant opportunities ahead for folks who check out your website.

    回复 2019年10月9日
  32. curry 4

    I intended to draft you a tiny observation just to thank you so much once again for your pretty pointers you’ve shown on this page. It has been simply remarkably generous of you to make freely all some people would have made available as an electronic book to help with making some money for themselves, notably considering that you could possibly have tried it if you decided. Those secrets in addition acted to be the good way to comprehend some people have the same interest just as mine to know a whole lot more concerning this problem. I’m sure there are some more enjoyable times up front for many who view your website.

    回复 2019年10月9日
  33. russell westbrook shoes

    I precisely had to thank you very much once more. I do not know what I might have made to happen in the absence of the entire solutions revealed by you directly on my field. It has been a very terrifying concern for me personally, but being able to see this well-written style you solved that forced me to weep over contentment. Extremely happier for your guidance and hope you know what a powerful job you are accomplishing teaching men and women thru your web page. Probably you haven’t met any of us.

    回复 2019年10月8日