zoukankan      html  css  js  c++  java
  • vue-webpack init && build

    1.执行初始化项目命令

    G:2021workspacevueLearnVueJS2>vue init webpack myweb
    ? Project name myweb
    ? Project description A Vue.js project
    ? Author shaozhiqi <zhiqishao@XXX.com>
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended) npm
    
       vue-cli · Generated "myweb".
    
    # Installing project dependencies ...
    
    G:2021workspacevueLearnVueJS2>cd myweb

    2.查看效果

     3.修改vue版本

    查看最新版本:https://github.com/vuejs/vue/releases

     修改package.json

     4.启动我们初始化的前端项目

    G:2021workspacevueLearnVueJS2>cd myweb
    G:2021workspacevueLearnVueJS2myweb>npm run dev
    
    > myweb@1.0.0 dev
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
     13% building modules 28/31 modules 3 active ...acevueLearnVueJS2mywebsrcApp.vue{ parser: "babylon" } is deprecated;
     we now treat it as { parser: "babel 95% emitting
    
     DONE  Compiled successfully in 4662ms                                                                       上午10:17:26
    
     I  Your application is running here: http://localhost:8080

    查看效果:

     5.项目打包

    G:2021workspacevueLearnVueJS2myweb>npm run build
    
    > myweb@1.0.0 build
    > node build/build.js
    
    - building for production...(node:15744) Warning: Accessing non-existent property 'cat' of module exports inside circular
     dependency
    。。。。。。。。。。。。。。
    (node:15744) Warning: Accessing non-existent property 'which' of module exports inside circular dependency
    Hash: e338f4a93560c360121d
    Version: webpack 3.12.0
    Time: 8623ms
                                                      Asset       Size  Chunks             Chunk Names
                   static/js/vendor.00d360f7b37e02379b40.js     124 kB       0  [emitted]  vendor
                      static/js/app.b22ce679862c47a75225.js    11.6 kB       1  [emitted]  app
                 static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
        static/css/app.30790115300ab27614ce176899523b62.css  432 bytes       1  [emitted]  app
    static/css/app.30790115300ab27614ce176899523b62.css.map  797 bytes          [emitted]  
               static/js/vendor.00d360f7b37e02379b40.js.map     624 kB       0  [emitted]  vendor
                  static/js/app.b22ce679862c47a75225.js.map    22.2 kB       1  [emitted]  app
             static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                                 index.html  507 bytes          [emitted]  
    
      Build complete.
    
      Tip: built files are meant to be served over an HTTP server.
      Opening index.html over file:// won't work.
    
    
    G:2021workspacevueLearnVueJS2myweb>

    查看结果:

     6.命令总结:

    $ vue init webpack myweb
    $ cd myweb
    $ npm run dev(npm start)
    $ npm run build (编译打包)
  • 相关阅读:
    input,textarea限制字数,实时绑定
    rem布局和vw布局的理解
    HTML5+CSS3响应式垂直时间轴,高端,大气
    谈谈前端工程化是个啥?
    js动态添加html标签和属性_手动插入meta、script、div、img等标签
    textarea换行_在textarea中如何换行的实现总汇
    css常用的颜色单位表示法
    CSS3 2D转换
    为什么设置overflow为hidden可以清除浮动带来的影响
    什么是数据交互格式?xml和json优缺点
  • 原文地址:https://www.cnblogs.com/shaozhiqi/p/14661805.html
Copyright © 2011-2022 走看看