Vue Single file component (packaged with Webpack)

I. Deployment of production environment

In the development environment, VUE provides a number of warnings to help you deal with common mistakes and pitfalls. In the production environment, these warning statements are not used, but will increase the volume of the application. In addition, some warning checks also have some small runtime overhead that can be avoided in the production environment mode.

1) Do not use the build tool

If you use the full standalone version of Vue, which is to introduce the element directly to <script> Vue without building it in advance, remember to use the compressed version ( vue.min.js ) in the production environment.

2) using the Build tool

When using Webpack or browserify similar build tools,Vue Source will process.env.NODE_ENV decide whether to enable the production environment mode, and the default is the development environment mode. There are methods in both Webpack and browserify to override this variable to enable the Vue production environment mode, while warning statements are also removed by the compression tool during the build process .

II. VUE Single File component

Separation of concerns is not equal to file type separation. In a component, its templates, logic, and styles are internally coupled, and putting them together actually makes the components more cohesive and maintainable.

vue-loaderis a Webpack loader, you can convert the Vue single file component to a JavaScript module

A .vue file is a custom file type that describes a Vue component in class HTML syntax. Each .vue file contains three types of top-level language <template> blocks <script> , <style> and also allows optional custom blocks to be added.

vue-loaderParses the file, extracts each language block, and, if necessary, processes it through other loader, and finally assembles them into a CommonJS module, module.exports out of a Vue.js component object.

1, ES2015

When the project is configured babel-loader or buble-loader , vue-loader they are used to process all .vue the parts of the file <script> , allowing us to use ES2015 in the Vue component. Babel-loader can be executed in an existing environment by converting the ES6 code to ES5 code.

<script>'./componenta.vue'./componentb.vue 'default  {  Components: {    Componenta,    componentb  }}</script>

We use the concise notation of the properties of ES2015 to define subcomponents, which { ComponentA } is { ComponentA: ComponentA } shorthand, and Vue will automatically convert the key to component-a , so you can use it in the template <component-a> .

Because vue-loader you are only working with .vue files, you need to tell Webpack how to use babel-loader or buble-loader process ordinary .js files.

1) Babel Installation:npm install --save-dev babel-loader babel-core

2) using config mode (webpack.config.js):

module: {rules: [{test : /\. Js$/exclude : /node_modules/ Span class= "NA" >loader: "Babel-loader" } }


< Span class= "p" > < Span class= "NA" > (Exclude: Exclude node_modules This module, improve packaging speed)

3) use .babelrc configuration Babel

Although the Babel has been configured, it does not really take effect. create a. babelrc file in the root directory of the project and enable some plugin . First, you can use the Convert es2015+ env preset.

npm install babel-preset-env --save-dev

.babelrc文件
{  "presets": ["env"]}

2，Css
When <style> a tag has an scoped attribute, its CSS only acts on the elements in the current component. You can use both scoped and non-scoped styles in one component:

 <style>/* Global style */</< Span class= "Hljs-name" >style><style scoped>/* local style */ </STYLE> 
 <style lang=" sass "> /* write Sass Here */</STYLE>         
               

 /*   Webpack.config.js  */ module: {rules: [{ //loader is processed from right to left  test: /\.scss$|\.sass$/ ' Style-loader ', ' css-loader ', ' postcss-loader ', ' Sass-loader ' /\.less$/ ' Style-loader ', ' Css-loader ', ' postcss-loader ', ' less-loader ' }}, {test: /\. Css$/ ' Style-loader ', ' css-loader ', ' postcss-loader ' 

1) Css-loader: Parse Css,style-loader: Insert the processed style into the head tag of the page;

2) Postcss-loader:css after processor, put in css-loader and style-loader之后 , but placed in other preprocessor such assass loader或less loader之前；

EG:POSTCSS plug-in autoprefixer：根据当前浏览器给css加上必要的前缀以兼容该浏览器，同时移除不必要的css前缀。
a）安装：  --save-dev
b）在目录中创建postcss.config.js文件
c）postcss.config.js引入autoprefixer插件

Module.exports = {  plugins: [    require (' autoprefixer ')  ]}

3) Sass-loader: Convert Scss to CSS
Installation: cnpm install sass-loader node-sass webpack --save-dev

Vue Single file component (packaged with Webpack)