Home > Developer > Web Develop
npm init -y Initialize Project
Installing the various dependencies
npm install --save vueInstalling vue2.0
npm install --save-dev [email protected]^2.1.0-beta.25 [email protected]^2.1.0-beta.9Install Webpack and Webpack test Server, the default installation is version 1.0, so you must specify a version number
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-loader used to parse CSS
New directory SRC, inside new App.vue
<!--simply write a title and a loop -<Template> <DivID= "Example"> <H1>{{msg}}</H1> <ul> <Liv-for= "N in 5">{{n}}</Li> </ul> </Div></Template><Script>Exportdefault{data () {return{msg:'Hello world!' } }}</Script><stylescoped>#example{background:Red;Height:100VH;}</style>
Create a new main.js under the SRC directory
/* Introduce Vue and home page */import vue from ' Vue ' import App from './app.vue '/* Instantiate a Vue */new vue ({ el: ' #app ', render:h = H (App)})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 [email protected]^2.1.0-beta.25To install Webpack globally to use the Webpack command
webpack Use 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><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>Vue-webpack</title></Head><Body> < SectionID= "App"></ Section> <Scriptsrc= "./dist/build.js"></Script></Body></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 [email protected]^2.1.0-beta.9To install webpack-dev-server globally to use the Webpack-dev-server command
webpack-dev-server Wait for the program to finish running
http://localhost:8080/view page in Browser input
Then modify the code of the page without refreshing the browser to change directly
ReferenceReprint Address: 1190000008166081
Reference address: Webpack+vue.js Quick Start Tutorial
Build vue2.0 Ultra-detailed lite with webpack2.0
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
