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

福尔摩斯对我笑 2019-06-05 4413 次 2103条

创建文件

  • 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
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


已有 2103 条评论 1


  1. fully glazed internal doors

    Hey! I just wanted to ask if you ever have any problems with hackers? My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no back up. Do you have any solutions to stop hackers?

    回复 2020年1月22日
  2. apk vivoslot

    Very good blog post. I certainly love this site. Thanks!

    回复 2020年1月22日
  3. Nonton Bokep

    You ought to be a part of a contest for one of the highest quality websites online. I’m going to highly recommend this website!

    回复 2020年1月22日
  4. video bokep

    I’m impressed, I must say. Seldom do I encounter a blog that’s both educative and amusing, and let me tell you, you have hit the nail on the head. The problem is something not enough people are speaking intelligently about. I am very happy that I came across this in my search for something concerning this.

    回复 2020年1月22日
  5. video bokep

    Pretty! This has been an incredibly wonderful post. Thanks for providing these details.

    回复 2020年1月22日
  6. situs togel terpercaya

    Way cool! Some very valid points! I appreciate you penning this post and the rest of the website is also very good.

    回复 2020年1月22日
  7. apk vivoslot

    Spot on with this write-up, I honestly believe that this amazing site needs far more attention. I’ll probably be returning to read through more, thanks for the information!

    回复 2020年1月22日
  8. togel online

    Everything is very open with a very clear description of the challenges. It was really informative. Your site is extremely helpful. Thank you for sharing!

    回复 2020年1月22日
  9. situs togel terpercaya

    I blog quite often and I truly appreciate your information. Your article has really peaked my interest. I am going to bookmark your website and keep checking for new details about once per week. I opted in for your Feed too.

    回复 2020年1月22日
  10. bandar togel terpercaya

    Can I simply just say what a comfort to uncover someone who truly knows what they are discussing on the net. You certainly realize how to bring a problem to light and make it important. A lot more people must read this and understand this side of your story. It’s surprising you are not more popular since you most certainly possess the gift.

    回复 2020年1月21日
  11. judi togel

    I used to be able to find good advice from your blog posts.

    回复 2020年1月21日
  12. https://howtogetbetterinlife.com/

    I’m impressed, I must say. Rarely do I encounter a blog that’s equally educative and amusing, and without a doubt, you have hit the nail on the head. The problem is an issue that not enough men and women are speaking intelligently about. Now i’m very happy that I came across this in my hunt for something regarding this.

    回复 2020年1月21日
  13. situs togel

    Greetings, I think your web site could be having web browser compatibility problems. Whenever I look at your website in Safari, it looks fine however, when opening in IE, it’s got some overlapping issues. I just wanted to provide you with a quick heads up! Besides that, excellent blog!

    回复 2020年1月21日
  14. situs togel terpercaya

    I’d like to thank you for the efforts you have put in penning this site. I am hoping to see the same high-grade blog posts by you in the future as well. In truth, your creative writing abilities has motivated me to get my own, personal website now 😉

    回复 2020年1月21日
  15. Perusahaan recruitment

    I couldn’t refrain from commenting. Well written!

    回复 2020年1月21日
  16. https://www.familyhealthavenue.net/

    I blog quite often and I really appreciate your information. Your article has really peaked my interest. I will book mark your website and keep checking for new information about once a week. I subscribed to your RSS feed too.

    回复 2020年1月21日
  17. Hoa qua sach

    Enjoyed looking at this, very good stuff, thanks . “Love begets love, love knows no rules, this is the same for all.” by Virgil.

    回复 2020年1月21日
  18. situs togel

    Can I simply just say what a comfort to uncover somebody who actually understands what they’re discussing over the internet. You actually know how to bring an issue to light and make it important. A lot more people have to look at this and understand this side of your story. I was surprised you are not more popular because you most certainly possess the gift.

    回复 2020年1月21日
  19. www.merpati99.info

    I could not refrain from commenting. Well written!

    回复 2020年1月21日
  20. togel online

    Nice post. I learn something new and challenging on websites I stumbleupon on a daily basis. It will always be useful to read through articles from other authors and use something from their web sites.

    回复 2020年1月21日
  21. situs togel terpercaya

    After exploring a handful of the blog articles on your blog, I truly like your technique of writing a blog. I saved as a favorite it to my bookmark site list and will be checking back soon. Please visit my website as well and let me know how you feel.

    回复 2020年1月21日
  22. hongkongpools com today results

    从零搭建vue单文件组件项目 | 未来博客 http://24-job.com/go?https://www.hongkongpool.io/

    回复 2020年1月21日
  23. Jasa Website

    Hello! I simply wish to give you a big thumbs up for your great information you’ve got here on this post. I am returning to your blog for more soon.

    回复 2020年1月21日
  24. situs togel

    This website was… how do you say it? Relevant!! Finally I have found something which helped me. Thank you!

    回复 2020年1月21日
  25. judi togel

    Having read this I thought it was extremely informative. I appreciate you spending some time and energy to put this informative article together. I once again find myself spending a significant amount of time both reading and posting comments. But so what, it was still worthwhile!

    回复 2020年1月21日
  26. mainbadarq

    Way cool! Some extremely valid points! I appreciate you writing this post plus the rest of the site is also very good.

    回复 2020年1月21日
  27. idn play

    I’m impressed, I must say. Seldom do I encounter a blog that’s equally educative and entertaining, and let me tell you, you have hit the nail on the head. The problem is something that not enough folks are speaking intelligently about. Now i’m very happy that I stumbled across this in my search for something relating to this.

    回复 2020年1月21日
  28. download vivoslot apk

    Hi, I do think this is an excellent blog. I stumbledupon it 😉 I will come back once again since i have saved as a favorite it. Money and freedom is the greatest way to change, may you be rich and continue to guide others.

    回复 2020年1月21日
  29. agen vivo slot

    I used to be able to find good info from your articles.

    回复 2020年1月21日
  30. daftar vivoslot

    Hello there! I just want to offer you a big thumbs up for the excellent info you have got right here on this post. I will be returning to your site for more soon.

    回复 2020年1月21日
  31. serebryaniy-bereg

    I blog often and I seriously appreciate your information. Your article has truly peaked my interest. I am going to book mark your site and keep checking for new details about once a week. I subscribed to your Feed too.

    回复 2020年1月21日
  32. http://n3k4.com/

    I’m excited to discover this web site. I need to to thank you for ones time for this fantastic read!! I definitely enjoyed every little bit of it and i also have you book-marked to look at new stuff on your web site.

    回复 2020年1月21日
  33. idn poker

    You have made some really good points there. I checked on the internet for more information about the issue and found most individuals will go along with your views on this site.

    回复 2020年1月21日
  34. vivoslot android

    Hi, I do believe this is an excellent web site. I stumbledupon it 😉 I am going to come back yet again since I bookmarked it. Money and freedom is the best way to change, may you be rich and continue to help others.

    回复 2020年1月21日
  35. video bokep

    Everything is very open with a clear explanation of the issues. It was truly informative. Your website is useful. Many thanks for sharing!

    回复 2020年1月21日
  36. Bokep

    I was able to find good info from your blog posts.

    回复 2020年1月21日
  37. login vivoslot

    It’s nearly impossible to find knowledgeable people about this subject, however, you sound like you know what you’re talking about! Thanks

    回复 2020年1月21日
  38. agen vivoslot

    This is the right webpage for everyone who wants to understand this topic. You know so much its almost tough to argue with you (not that I really would want to…HaHa). You definitely put a brand new spin on a topic which has been discussed for years. Great stuff, just wonderful!

    回复 2020年1月21日
  39. Pkv Pulsa

    When I originally left a comment I appear to have clicked the -Notify me when new comments are added- checkbox and now every time a comment is added I get four emails with the exact same comment. Perhaps there is a means you are able to remove me from that service? Many thanks!

    回复 2020年1月21日
  40. download film

    A fascinating discussion is definitely worth comment. I believe that you should publish more about this topic, it may not be a taboo matter but typically folks don’t talk about such topics. To the next! Many thanks!!

    回复 2020年1月21日
  41. Hoa qua sach Anh Xanh

    WONDERFUL Post.thanks for share..extra wait .. …

    回复 2020年1月21日
  42. Gonggong.id

    I was very pleased to find this great site. I want to to thank you for ones time just for this wonderful read!! I definitely loved every little bit of it and i also have you book marked to look at new information on your website.

    回复 2020年1月21日
  43. situs judi online terpercaya

    You made some really good points there. I checked on the web for additional information about the issue and found most people will go along with your views on this site.

    回复 2020年1月21日
  44. Anh Xanh Hoa Qua Sach

    There is noticeably a lot to know about this. I consider you made various good points in features also.

    回复 2020年1月21日
  45. Slot Online

    Greetings! Very helpful advice in this particular post! It’s the little changes that produce the most significant changes. Many thanks for sharing!

    回复 2020年1月21日
  46. read light novel

    I really like looking through an article that can make people think. Also, many thanks for allowing me to comment!

    回复 2020年1月21日
  47. Situs Poker Online

    This website truly has all of the information and facts I wanted concerning this subject and didn’t know who to ask.

    回复 2020年1月21日
  48. dominoqq terpercaya

    Hi there, There’s no doubt that your web site could possibly be having browser compatibility problems. Whenever I take a look at your site in Safari, it looks fine however when opening in Internet Explorer, it has some overlapping issues. I simply wanted to give you a quick heads up! Apart from that, fantastic site!

    回复 2020年1月21日
  49. download film

    Aw, this was a really good post. Spending some time and actual effort to generate a good article… but what can I say… I hesitate a lot and never manage to get anything done.

    回复 2020年1月21日
  50. Pkvpulsa

    Everything is very open with a really clear description of the issues. It was really informative. Your website is very useful. Thanks for sharing!

    回复 2020年1月21日