This project can be used as a starting point to use vue.js to enhance a simple static HTML website. It will allow the creation of a few choice vue.js components adding dynamic features to an otherwise static HTML pages. More importantly, this project is intended as a gradual introduction to a modern web development workflow.
I created this project out of necessity when teaching a front end web development course. I needed the students to adopt a simple front end workflow when developing simple multi page websites. Most of the starter WebPack projects I encountered were geared towards single page web applications. This project addresses this issue in presenting a versatile WebPack configuration intended to support multiple HTML pages.
-
This project depends on node version 6 or higher
-
On a personal computer the version of node should be determined by running
node –v
. If the version is lower than 6, then update node & npm before you progress -
If cloud9 (my teaching set up) is being used as a learning tool/development environment node version manager(nvm) can be used to upgrade to the correct version of node. From within your root workspace folder run:
nvm install 6
nvm alias default 6
-
Clone this repository
git clone https://github.com/joeappleton18/Simple-Vue-Webpack-and-SASS.git
-
Run the following commands:
-
npm install
: install the dependencies -
npm run watch
: will run webpack continuously -
The build will be output to the
dist
folder every time you update a file that's part of the project bundle. Never edit anything in the dev folder.
- Each time you create a new HTML file you will need to import it in
main.js
e.g.import '../index.html';
- Ensure the
<script src="bundle.js"></script>
tag is included above the</body>
tag in the new HTML page.
- The project works out of the box, however it is expected that students will extend it. Or, at the very minimum, play around with the settings.
- To copy non-bundled assets to the dist folder simply add the asset
from
andto
location to theCopyWebpackPlugin array
. The asset can be a file or a whole folder.
new CopyWebpackPlugin([
{from: 'src/images', to: 'images'},
{from: 'src/fonts', to: fonts}
])