Some of the pits webpack+vue2.0 encountered

Partially dependent versions of packages:

1"Dependencies": {2"Vue": "^2.3.3",3"Vue-router": "^2.3.1"4  },5"Devdependencies": {6"Eslint-loader": "^1.7.1",7"Stylus": "^0.54.5",8"Stylus-loader": "^3.0.1",9"Url-loader": "^0.5.8",Ten"Vue-loader": "^12.1.0", One"Vue-style-loader": "^3.0.1", A"Vue-template-compiler": "^2.3.3", -"Webpack": "^2.6.1", -}

1. Use stylus to configure ' stylus ' and ' Stylus-loader ' in Package.json and execute ' npm install stylus-loader Stylus ' command.

1.1 All Styl files are dependent on a primary file index.stly, and then in Main.js the primary file is dependent

// index.styl files, injecting other styl files via @import to the dependent @import "base" "Mixin" "Icon"

2. Configure aliases and extensions in the webpack.base.conf file

Note: ' __dirname ' is a two underline!

Resolve: {    extensions: ['. js ', '. Vue ', '. json ', '. Styl '],    alias: {      ' vue$ ': ' vue/dist/ Vue.esm.js ',      ' @ ': Resolve (' src '),      ' src ': path.resolve (__dirname, ' ... /src '),      ' common ': path.resolve (__dirname, ' ... /src/common '),      ' components ': Path.resolve (__dirname, '. /src/components ')    }  }

Once the aliases and extensions are configured, Main.js can write this:

Import vue from ' Vue'./app' vue-router '; // Components can be preceded by ' @/', or omitted to be written // if there is no alias, write "Import goods from". /components/goods/goods '; " Import goods from ' components/goods/goods' components/seller/seller' components/ratings/ratings "' @/common/stylus/index ';

Some of the pits webpack+vue2.0 encountered