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

福尔摩斯对我笑 2019-06-05 362 次 20条

创建文件

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

发表评论



 


已有 20 条评论 1


  1. 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日
  2. 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日
  3. 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日
  4. 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日
  5. 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日
  6. 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日
  7. 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日
  8. 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日
  9. 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日
  10. 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日
  11. 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日
  12. 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日
  13. 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日
  14. 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日
  15. 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日
  16. 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日
  17. 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日
  18. 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日
  19. 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日
  20. 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日