Home > Developer > Web Develop
npm init -yInitialize project//-y to generate Package.json automatically, if you need to configure yourself, remove-y
Installing the various dependencies
npm install --save vueInstalling vue2.0
npm install --save-dev webpack webpack-dev-serverInstall Webpack and Webpack test server//default installation of the latest version of version 2.x
npm install --save-dev babel-core babel-loader babel-preset-es2015Install Babel, the General browser is not aware of ES6 syntax, the role of Babel is to compile the ES6 syntax into the browser to understand the syntax
npm install --save-dev vue-loader vue-template-compilerFiles used to parse the Vue component,. vue suffix
npm install --save-dev css-loader file-loaderUsed to parse CSS
Writing a page
New directory SRC, inside new App.vue
<!--simply write a title and a loop--><template> <div id= "Example" > for = "N in 5" >{{n}}</li> </ul> </div></template ><script>default { data () { return { ') Hello world! ' } }} </script><style scoped>#example { background: #000000;
Color: #fff; HEIGHT:100VH;} </style>Create a new main.js under the SRC directory
/* */' vue './app.vue '/* */new Vue ({ ' #app ', + = h (APP)})Configure Webpack
Create a new webpack.config.js under the root directory
/*introduction of the Operation Path module and Webpack*/varPath = require (' path ');varWebpack = require (' Webpack ')); Module.exports= { /*input File*/Entry:'./src/main.js ', output: {/*output directory, no new*/path:path.resolve (__dirname,'./dist '), /*static directory, you can fetch files directly from here*/Publicpath:'/dist/', /*file name*/FileName:' Build.js '}, module: {rules: [/*files used to parse the Vue suffix*/{test:/\.vue$/, Loader:' Vue-loader ' }, /*use Babel to parse the JS file and convert the ES6 syntax into a browser-aware grammar*/{test:/\.js$/, Loader:' Babel-loader ', /*exclude files from the module installation directory*/Exclude:/node_modules/ } ] }}
Packaging projects
npm install -g webpackTo install Webpack globally to use the Webpack command
webpackUse the Webpack command to package the project, this is the directory will be more than a dist folder, see there will be build.js, found inside the ES6 syntax has been transformed
Final project directory
Create a new index.html in the root directory and introduce build.js
<!doctype html>Page
So even if the package is complete, but every modification will have to be re-packaged so obviously no efficiency, so the need for hot load on the line
npm install -g webpack-dev-serverTo install webpack-dev-server globally to use the Webpack-dev-server command
webpack-dev-serverWait for the program to finish runninghttp://localhost:8080/view page in Browser input
Then modify the code of the page without refreshing the browser to change directly
Reproduced since 1190000008166081, thank Bo Master so detailed streamlined example!
Building vue2.0 Single-file components with webpack2.0 super-detailed refinement instances
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
