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

福尔摩斯对我笑 2019-06-05 30935 次 10113条

创建文件

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

发表评论



 


已有 10113 条评论 1


  1. 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日
  2. 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日
  3. 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日
  4. 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日
  5. 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日
  6. 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日
  7. 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日
  8. 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日
  9. 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日
  10. 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日
  11. 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日
  12. 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日
  13. 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日