Vue.js: new project

Install/update vue-cli¹

$ npm install -g vue-cli

OR

$ npm update -g vue-cli

 

Create new project

$ vue init <template-name> <project-name>

webpack is recommended for sophisticated, scaleable projects. You can also use webpack-simple if you only need the basic development functionality.

 

Install node modules

$ cd <project-name>
$ npm install

 

Add to repository

Now is a good time to enable version control for your new project.

 

Additional features

Enable SCSS support²

Vue.js is by default already configured to handle SCSS styles in single file components. Still though, you need to install some dependency, which is the scss-loader, if you really want to use it.

$ npm install sass-loader node-sass --save-dev

Globally import SCSS files³

To add a SCSS file globaly (e.g. variables, mixins, …) you need to add an additional loader and do a small webpack configuration update:

$ npm install sass-resources-loader --save-dev

Then, if using the webpack-template add the following setup to your sass loader in build/utils.js :

scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/styles/variables.scss')
  }
}),

Webpack

Don’t pack images into JS

To disable the adding of images as inline base64 code to JS make sure, that you reduce the limit for image files on the url-loader :

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 1, // Don't set to 0 or 'undefined'
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},

OR use the /static folder.

Remove /dist  folder before new build

By default, during the build only the dist/static  (or “assets”) folder will be removed. In most cases it should be better practice to remove the whole /dist folder, before outputting the new build. To change this, simply update the following line in /build/build.js :

// change
rm(config.build.assetsRoot, config.build.assetsSubDirectory), err => {

// to
rm(config.build.assetsRoot, err => {

 

1. https://github.com/vuejs/vue-cli [↩]
2. http://vuejs-templates.github.io/webpack/pre-processors.html [↩]
3. https://vue-loader.vuejs.org/en/configurations/pre-processors.html#loading-a-global-settings-file [↩]