Home > Developer > Web Develop

Using Webpack to build the Vue development environment

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Vue.js has been used as a major development framework in recent days on projects, and is used with Webpack for ease of release. The CSS framework uses the VUE-STRAP (Vue has encapsulated the bootstrap control)
This article mainly summarizes the concrete construction process, and some problems encountered in the way to solve

The main tools to use
    • Vue
    • Webpack
    • Vue-strap
    • Vue-router
Build Step 1. First establish the directory structure of the project
    • demo_project/
      • dist/webpack生成的文件
      • src/源代码文件
        • img/图片文件
        • css/css文件
        • js/js文件
        • components/定义的vue组件
        • views/视图文件，其实也是vue组件
      • Webpack.config.jswebpack配置文件
2. Installing Vue and Webpack 
# enter into the Demo_project directory
  NPM Install Vue--save
  NPM Install Webpack--save
3. Add the Webpack configuration file 
Module.exports = {
    './src/index.js ',
    Output: {
'/dist ',
' Bundle.js '
},
Module: {
Loaders: [{
/\.css$/,
' Style!css '
}]
}
}
4. Add a Package.json file 
# CD to Demo_project directory
#跟着步骤一步一步的完成

The last file generated is package.json as follows

{
  "Name":"Vuedemo",
  "Version":"1.0.0",
 "description":"A Vue demo with Webpack",
 "Main":"Webpack.config.js",
 "Dependencies": {
" vue": "^1.0.4",
" webpack": "^1.12.2"
},
"Devdependencies": {},
"Scripts": {
"test": "echo \" Error:no test specified\ "&& exit 1",
"Start":"Webpack--color--progress"
//Note that this was added after I generated it. Used to perform webpack. If Webpack installed in the global can be directly action Webpack to package
},
" Author": "Frank"
}

5. Add HTML and JS entry files 
<!--src/index.html--
<HTML> 
 < HEAD> 
  <meta charset= "Utf-8"; 
 </HEAD> 
  
 < Body> 
  <script type= "Text/javascript" src=</SCRIPT> 
 </BODY> 
        
/* Src/index.js  */
document.write (' hello. Webpack runs ok! ')
6. Verify that the Webpack is successful 
NPM start

Open the index.html in the browser. See hello. webpack runs ok! that the Webpack is running successfully.

This is followed by the Vue file that was loaded with Vue's loader. Write it again next time.
Then install Vue-loader.

7. Installing Vue-loader

  • Installation

    NPM Install Vue-loader--save

  • Modifying a configuration file

    Webpack.config.js
    loaders[
            ...
        {
    Test:/\.vue$/,
    Loader:' vue '
    }
    ...

  • Create a test Vue file in the views directory

    <!--Hello.vue--
    <Template>
     <STRONG&GT;{{VUEMSG}}</Strong>
    </TEMPLATE> 
      <script> 
     module.exports = {
      data () {
      return { Vuemsg: } 
      
     </SCRIPT> 
      <style scoped> 
         </STYLE>

  • Introducing Vue in the Index.js file 

     //index.js 
     var Vue = require (  ' vue ') 
     var hellovue = require (  new vue ({
      el:    Hello:hellovue 
      }

  • Modify Index.html to join the demo's Vue node in body

    ...
    <body>
      <hello></hello>
    ...
    </body>
    ...
8. Test Vue 
#根目录执行
NPM start

Open index.html and see红色背景的Vue hello world

Using Webpack to build the Vue development environment

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
how to setup php development environment using joomla to build website using php to build website java development environment python development environment javascript development environment ide integrated development environment

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More