Installation
There is a few ways to install Vue, but I prefer CLI as it's configured with webpack and comes with a boilerplate template.
It's slightly harder as it involve Node.js npm and Webpack, but you do get the benefits of hot reload server for testing and a production build configuration.
Install Node.js.
Install vue-cli.
npm install --global vue-cliCreate a project named hello using webpack template.
vue init webpack helloYou shall be promted of the following.
# press enter to use "hello"
? Project name (hello)
# press enter to continue
? Project description (A Vue.js project)
# press enter to continue
? Author (xxx <[email protected]>)
# select this
? Runtime + Compiler: recommended for most users
# select "Y" if you are building Single-Page Applications (SPA), else no
? Install vue-router? (Y/n)
# select "Y" to detect js problem and improve code quality, also more complaints.
? Use ESLint to lint your code? (Y/n)
# select this
? Standard (https://github.com/feross/standard)
# select "Y" for production
? Setup unit tests with Karma + Mocha? (Y/n)
# select "Y" for production
? Setup e2e tests with Nightwatch? (Y/n)Install npm packages for project hello.
cd hellonpm installStartup a hot reload server for development.
npm run devThe development server is started at http://localhost:8080 and automatically launch the browser.
To change the development server port or prevent auto open browser, edit config/index.js.
module.exports = {
build: {
...
},
dev: {
...
port: 8080,
autoOpenBrowser: true,
...
}
}Start coding Vue
Make sure you run npm run dev and preview the output at http://localhost:8080.
Edit src/app.js and add the following code at the bottom the file.
new Vue({ el: '#test', data: { message: 'Testing 123' }})Edit index.html and add a <div id="test"> tag.
... <body> <div id="test">{{ message }}</div> <div id="app"></div> <!-- built files will be auto injected --> </body>... You should be able to see Testing 123 shown at the top of the page.
Learn more about coding Vue.js using the official guide.