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

福尔摩斯对我笑 2019-06-05 11935 次 4259条

创建文件

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

发表评论



 


已有 4259 条评论 1


  1. nigger

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

    回复 2020年2月26日
  2. lesbian

    I’d like to thank you for the efforts you have put in writing this blog. I’m hoping to check out the same high-grade content by you later on as well. In truth, your creative writing abilities has inspired me to get my very own blog now 😉

    回复 2020年2月26日
  3. xxx

    Spot on with this write-up, I absolutely believe this site needs a lot more attention. I’ll probably be back again to see more, thanks for the advice!

    回复 2020年2月26日
  4. fag

    After I initially commented I seem to have clicked the -Notify me when new comments are added- checkbox and now whenever a comment is added I receive 4 emails with the same comment. There has to be a way you can remove me from that service? Many thanks!

    回复 2020年2月26日
  5. www.secrettantric.com

    This site was… how do I say it? Relevant!! Finally I’ve found
    something that helped me. Cheers!

    回复 2020年2月26日
  6. assshole

    Saved as a favorite, I love your blog!

    回复 2020年2月26日
  7. faggot

    I love reading an article that can make people think. Also, thank you for allowing me to comment!

    回复 2020年2月26日
  8. tuantender.id

    Hi, I do think this is a great blog. I stumbledupon it 😉 I’m going to come back yet again since i have bookmarked it. Money and freedom is the greatest way to change, may you be rich and continue to help others.

    回复 2020年2月26日
  9. escort

    Aw, this was an extremely nice post. Taking the time and actual effort to create a great article… but what can I say… I put things off a lot and never seem to get nearly anything done.

    回复 2020年2月26日
  10. gook

    Good post. I’m experiencing many of these issues as well..

    回复 2020年2月26日
  11. fuck

    Hi there! This blog post could not be written much better! Reading through this post reminds me of my previous roommate! He always kept talking about this. I’ll forward this post to him. Fairly certain he’ll have a great read. Many thanks for sharing!

    回复 2020年2月26日
  12. ass hole

    I love it when people get together and share opinions. Great blog, keep it up!

    回复 2020年2月26日
  13. viagra

    Excellent article. I am facing a few of these issues as well..

    回复 2020年2月26日
  14. 화성출장시(카톡- M o46)(moo2 7.c0M)동출장마사지콜걸샵Y╳〓2019-02-27-15-16화성☜AIJ☞출장소이스홍성출장시출장오피➳출장시♩출장연애인급╔화성

    You should take part in a contest for one of the highest quality blogs on the internet. I’m going to recommend this site!

    回复 2020年2月26日
  15. Amayze Life Keto

    What’s up, its pleasant article about media print, we
    all know media is a great source of facts.

    回复 2020年2月26日
  16. god damn

    That is a really good tip particularly to those fresh to the blogosphere. Simple but very accurate information… Thank you for sharing this one. A must read post!

    回复 2020年2月26日
  17. a325n tc bolts

    Hey are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and create my own. Do you require any coding expertise to make your own blog? Any help would be really appreciated!

    回复 2020年2月26日
  18. whore

    After looking at a number of the blog articles on your web site, I seriously like your technique of writing a blog. I book-marked it to my bookmark website list and will be checking back soon. Please check out my web site too and tell me how you feel.

    回复 2020年2月26日
  19. SCR888

    Hi there, I enjoy reading all of your article. I like to write a little comment to support you.

    回复 2020年2月26日
  20. bloody hell

    Hello, I do think your blog might be having internet browser compatibility issues. 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 merely wanted to give you a quick heads up! Aside from that, wonderful website!

    回复 2020年2月26日
  21. erotic

    You should take part in a contest for one of the most useful sites online. I’m going to highly recommend this web site!

    回复 2020年2月26日
  22. arse

    I really love your site.. Excellent colors & theme. Did you build this site yourself? Please reply back as I’m wanting to create my own site and would love to learn where you got this from or just what the theme is named. Kudos!

    回复 2020年2月26日
  23. piss

    This is a topic which is close to my heart… Many thanks! Where are your contact details though?

    回复 2020年2月26日
  24. fag

    Excellent site you’ve got here.. It’s hard to find high-quality writing like yours nowadays. I truly appreciate individuals like you! Take care!!

    回复 2020年2月26日
  25. escort

    Hi, I do think this is an excellent web site. I stumbledupon it 😉 I may revisit once again since i have book-marked it. Money and freedom is the greatest way to change, may you be rich and continue to guide others.

    回复 2020年2月25日
  26. www.cardmachine.co.uk

    This paragraph will assist the internet viewers
    for creating new website or even a blog from start to end.

    回复 2020年2月25日
  27. nonton bokep

    Wow, this paragraph is nice, my sister is analyzing these things, therefore I am going to tell her.

    回复 2020年2月25日
  28. modern construction materials

    Cool blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustements would really make my blog shine. Please let me know where you got your design. Thanks a lot

    回复 2020年2月25日
  29. free money

    Hi, i feel that i noticed you visited my web site
    thus i came to return the want?.I’m attempting to to find issues
    to improve my site!I guess its ok to make use of a few of
    your ideas!!

    回复 2020年2月25日
  30. assfucker

    Spot on with this write-up, I actually feel this web site needs a great deal more attention. I’ll probably be back again to read through more, thanks for the advice!

    回复 2020年2月25日
  31. boong

    Greetings! Very helpful advice in this particular post! It is the little changes that make the largest changes. Many thanks for sharing!

    回复 2020年2月25日
  32. agen joker123

    ดีใจด้วยนะครับอยากมีตังใช้ดูคลิปจากช่องป๋าหรือติดตามป๋าไว้เลยนะ

    回复 2020年2月25日
  33. escort

    When I originally commented I seem to have clicked the -Notify me when new comments are added- checkbox and from now on each time a comment is added I recieve four emails with the exact same comment. There has to be an easy method you can remove me from that service? Cheers!

    回复 2020年2月25日
  34. ass

    A fascinating discussion is definitely worth comment. I believe that you ought to publish more on this topic, it may not be a taboo subject but typically people do not talk about these subjects. To the next! Many thanks!!

    回复 2020年2月25日
  35. fag

    Saved as a favorite, I really like your site!

    回复 2020年2月25日
  36. pornography

    I’m more than happy to uncover this page. I need to to thank you for ones time for this fantastic read!! I definitely liked every bit of it and I have you bookmarked to look at new information in your website.

    回复 2020年2月25日
  37. 《칠곡출장맛사지》┪24시출장샵↷출장마사지샵⊿〈카톡: hwp63〉✿‹тре863.сом›칠곡9s0서울 조건 만남☎☝익산 모텔 추천칠곡2019-03-19-05-15[]칠곡[][][]출장 조건☆전화 tumblr칠곡➥p

    Oh my goodness! Amazing article dude! Many thanks, However I am encountering issues with your RSS. I don’t understand the reason why I cannot subscribe to it. Is there anyone else having the same RSS problems? Anybody who knows the solution will you kindly respond? Thanks!!

    回复 2020年2月25日
  38. 보령출장샵후기《카톡- M o46》 [moo2 7.c0M]출장안마추천출장여대생Y☑☇2019-02-27-14-01보령►AIJ◦출장서비스보장출장외국인안마❈콜걸업소◑출장시☌보령

    That is a good tip especially to those new to the blogosphere. Brief but very accurate information… Thank you for sharing this one. A must read post!

    回复 2020年2月25日
  39. Free Porn Videos -JavMama

    WOW just what I was looking for. Came here by searching for Free Porn Videos -JavMama

    回复 2020年2月25日
  40. Witalis

    This is really interesting, You are a very skilled blogger.
    I’ve joined your feed and look forward to seeking more of your wonderful post.
    Also, I’ve shared your website in my social networks!

    回复 2020年2月25日
  41. fag

    Good day! I could have sworn I’ve visited this web site before but after going through a few of the articles I realized it’s new to me. Anyhow, I’m certainly pleased I came across it and I’ll be bookmarking it and checking back frequently!

    回复 2020年2月25日
  42. penisfucker

    Aw, this was an extremely good post. Taking the time and actual effort to produce a great article… but what can I say… I hesitate a whole lot and never manage to get anything done.

    回复 2020年2月25日
  43. assfucker

    Aw, this was a very good post. Taking a few minutes and actual effort to produce a good article… but what can I say… I put things off a lot and don’t manage to get anything done.

    回复 2020年2月25日
  44. dirty

    Hello there! This article couldn’t be written any better! Going through this article reminds me of my previous roommate! He always kept preaching about this. I am going to send this information to him. Fairly certain he’s going to have a great read. Many thanks for sharing!

    回复 2020年2月25日
  45. anus

    I was pretty pleased to find this site. I want to to thank you for your time for this particularly wonderful read!! I definitely really liked every part of it and i also have you book marked to see new things in your web site.

    回复 2020年2月25日