This article is reproduced from the following link: https: //blog.csdn.net/qq_37942845/article/details/90444784
1, the installation vue-cli3 scaffolding, do not know the official website to vue-cli
-g @ VUE install npm / cli
2, created by the project vue-cli3
vue create my-project
creation process there are many options, my common options:
A brief introduction:
a, Babel: transcoding tool, it has more than es2015 code can be happy with, you must have!
b, Router: front-end route to a single page, the basic essential
c, Vuex: vue state management for complex projects very little effort
d, eslint: code specifications, it may or may not, for the team, it is best to use
>>> Next:
Whether history routing mode, this we know everything, can also modify their own routing file, without being n
>>> Next:
css pretreatment, for my own use of sass, look at individual needs
>>> Next:
eslint, 1, only the error; 2, Aribnb specification; 3, Standar specification; 4, landscaping;
Option 3 nothing wrong
>>> Next:
eslint is still time to git commit an error when saving? Of course, time is saved
>>> Next:
Whether to generate a separate file: ok
>>> Next:
Are these pre-configured as a future project, that is, the next can be used directly, ok
>>> Next:
These configurations give a name from:
>>> Next: automatically install dependencies, you can wait, bringing the official build vue-cli3 is completed, install the following vant UI
3, installation vant
After installing cli project, point to cd into the project directory, install vant
the install Vant -S NPM
. 4, mounted babel-plugin-import plug (demand loading)
# Install the plug
npm i babel-plugin-import -D
then babel.config.js file:
// For babel7 users can configure the babel.config.js
module.exports = {
Presets: [
'@ VUE / App'
],
plugins: [
[ 'Import', {
libraryName: 'Vant',
libraryDirectory: 'ES',
style: to true
}, 'Vant']
]
};
// you can then be introduced directly into the code assembly Vant
// code plug is automatically incorporated into demand in the form of two way
import {Button} from 'Vant';
. 5, Vant REM adaptation need to install two plug
postcss-pxtorem is a postcss plug the unit into a rem
lib-rem flexible for setting the reference value
postcss-pxtorem:
npm install postcss-pxtorem --save-dev
lib-flexible：
npm i -S amfe-flexible
then: main.js introduced amfe-flexible
import 'amfe-flexible / index.js'
within the file postcss.config.js
// Modify before:
module.exports = {
plugins: {
}
}
// modified
module.exports = {
plugins: {
'autoprefixer': {
browsers: [ 'the Android> = 4.0', 'the iOS> =. 7']
} ,
'postcss-pxtorem': {
rootValue: 37.5,
propList: [ '*']
}
}
}
. 6, restarting the project
RUN serve NPM
Tip: 1,375px i.e., 100% of the width, the write processing px rem automatically, if rem not want to be treated, may be used to write PX.
---------------------
Author: Sky wins subsemigroups
Source: CSDN
Original: https: //blog.csdn.net/qq_37942845/article/details/90444784
Disclaimer: This article is a blogger original article, reproduced, please attach Bowen link!