Summary of Background
In view of the many times I put up, and often more difficult to remember, retrieve information everywhere, especially a waste of time, so their knowledge of learning to do a little summary for future development of the use of time. The case of paper based on the premise that you are already familiar with vue, but the basic steps are not very easy to be able to think of it.
Code resides address. URL is normal, you can rest assured that visit, it is just a code repository.
https://gitee.com/blueboz/vue-demo/tree/master
The basic steps to build
1. Create an empty project
2. Use npm initialize the project
This step is just routine to initialize all items npm
npm init -y
3. Install webpack
Webpack installation, command-line tool that allows us to use webpack packaged, and webpack-dev-server at the command line, to help us in the development and deployment of direct heat
npm i webpack webpack-cli webpack-dev-server -D
Under the project root directory
var path = require('path');
var webpack = require('webpack');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
contentBase:'./dist',
hot:true,
port:3000
},
plugins: []
}
Add the following package.json file, this way, it can be run using npm run dev, and npm run build packaged
"scripts": {
"dev": "webpack-dev-server --open --hot",
"build": "webpack --progress --hide-modules"
}
At this time, if you start npm run dev will open an interface for us to suggest the following error. So now, we need to provide some js script, to enrich our capabilities, as well as some plug-ins to support us.
Small Tips
Right-click on the file package.json, show npm Scripts, there will be a panel npm
4. install the necessary plug-ins (css, js, png, html)
- (*.html) html-webpack-plugin
- (*.css) style-loader css-loader
- (*.less) less less-loader
- ( .Sass / .scss) Node-Sass Sass-Loader (not introduced)
- (*.js) babel-loader@7 babel-core babel-preset-env（babel-preset-es2015, es2016, es2017）
- (*.js) babel-polyfill |babel-runtime,babel-transform-runtime
The first step , first create index.html file with index.js
Index.js document author, using a function es6 arrow, and Generator function head to the back of the lead used to pave the way of Babel.
The first step, processing html template file
npm i html-webpack-plugin -D
Then, plugins webpack.config.js file added, said to index.html src directory as a template, and in the end this html file, citing additional bundle.js script.
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
})
The use of this using npm run dev
can preview page should have the effect (using Chrome or Firefox, do not use IE)
The second step supports the use css styles
npm i style-loader css-loader -D
Then webpack.config.js file to add,
plugins:[],
module: {
rules: [
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
Then the css support,
The third step, less support
npm i less less-loader -D
rules added
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
The fourth step, support jpg, png, ttf, etc.
npm i file-loader -D
Similarly, rules which add the following
{
test:/\.(png|svg|jpg|gif)$/,
use:['file-loader']
},{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:['file-loader']
}
At this step, we have supported the css, less, html, font resources, pictures, etc.,
seemingly successfully, otherwise mad now if you use some low-end browser to open our page, you will be surprised page does not open properly, it is because our application index.js script inside a lot of es6 syntax, such as let, class, and Generator function.
So how should we support these new syntax for it? The answer is to be introduced babel below us.
The fifth step, the introduction of Babel
目前的Babel已经支持到了7 ,与Babel6 的不同大概是插件包的名称叫法的改变而已，
举个例子来说，babel 有几大核心的组件
babel-core,babel-preset-env,babel-loader,在babel 6中，安装这几个插件的命令
是
npm i babel-core babel-preset-env babel-loader@7
但是在babel7 中是使用
npm i @babel/core @babel/preset-env babel-loader@8
只是名称的改变而已，实质上没有太大的区别。
作为样例，我们这里使用babel6来举例子。配置上的不同我也会指出来。
步骤a.安装基础包
npm i babel-cli -g
npm i babel-core babel-preset-env babel-loader@7 -D
babel-core提供一些核心的API接口给我们，可以通过如下代码导入工具包
var babel = require("@babel/core");
import { transform } from "@babel/core";
import * as babel from "@babel/core";
然后调用babel 的一些方法进行转化，详细信息可以参考官方对该插件的描述内容。https://babeljs.io/docs/en/next/babel-core.html
babel-cli 是干嘛的，提提供一个babel终端工具，可以让我们自己编译js文件
一般建议全局安装,使用办法是
babel index.js --out-dir lib -options
对于babel-preset-env 这个工具包，我们还得从其他插件谈起，由于babel对代码的转化都是基于插件的，也就是plugins，这意味着,对于箭头函数，就会有一个插件用于转化箭头函数的。确实如此，如下地址就是对该插件的描述
https://babeljs.io/docs/en/next/babel-plugin-transform-arrow-functions.html
问题来了，那么如果要转化class关键字，generator函数呢？
确实也是有的，如下两个地址分别是class转化函数与generator转化函数的描述。
https://babeljs.io/docs/en/next/babel-plugin-transform-classes.html
https://babeljs.io/docs/en/next/babel-plugin-transform-regenerator.html
对与每一个插件，我们需要在
.babelrc文件里面，添加类似的，这样会导致我们的plugins变得庞大
上图的插件配置引自babel7 ,看不懂的话把@去掉，"/“替换成”-" 就是完整的插件名称了。
而preset-env这个插件，即是为了整合而出现的，使用这个preset-env，我们就没有必要一个一个引用了。只需要引入preset-env这一个预置的插件即可
最后一个是babel-loader ，这个应该算是一个中间的媒介，作为webpack打包的规范工具，我们知道，作为webpack 来说，babel是一个未知的东西，对于webpack在打包js文件的时候，他并不知道箭头函数应该怎么处理，巧的是,babel知道，但是，webpack应该怎么让babel帮他转化呢，答案是,实现webpack的rules中的插件，在处理js的时候，调用babel插件，这就是babel-loader的作用了。
注意要在webpack.config.js文件中添加如下代码
{
test:/\.js$/,
use:['babel-loader'],
exclude:/node_modules/
}
来说说.babelrc ,这个文件一共分为两种配置
presets和plugins，这个我们之前也有简单的提过，preset 一般是一些一体包，一般包含许多的插件，而plugins 是单独一个插件的配置。
{
"presets": [
["env",{
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}]
]
}
一切看似差不多了，那么我们可以使用babel 编译一下，看看我们编译完之后，脚本是什么样子
babel src\index.js --out-dir lib
你会惊奇的发现，我们写的箭头函数，变成了这样子了。这正好是低级浏览器所支持的。
class关键字，被转化成了调用_createClass公共方法了。
这个时候，我们新建一个index.html 引用我们生成的脚本，这个时候，一开始正常的界面反而不正常了。
还报错了，这是因为我们使用generator函数里面调用了regeneratorRuntime这个一个实体类，这个实体类需要引用一个基础包。这也就引入我们下一步的动作
步骤b.安装babel-polyfill 或babel-runtime,babel-transform-runtime
这里有2个选择，依赖babel-poly ,这个提供了一些高级语法转化过程中，使用到的一些依赖包，
我们先试试这个。
npm i babel-polyfill -S
然后又有2中方法引入
第一种，在index.js文件中通过如下代码进行依赖
import 'babel-polyfill'
第二种，在webpack.config.js中添加如下的entry也可以实现。
entry: ['babel-polyfill','./src/index.js'],
现在，让我们启动一下我们的网站，在IE里面，可以发现页面也可以打开了，到这一步，你是不是认为就可以了，其实，不然，因为上一步，我们需要在脚本里面引入babel-poly,实际对我们的代码已经产生了侵犯,污染变量
第二种选择是使用插件方式，这个插件，会对一些公共方法进行抽取，同时提供类似polyfilll的功能。
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
并且将如下代码加入.babelrc,记住去掉我们上一步加的polyfill的哪些代码
{
"plugins": ["transform-runtime"]
}
使用babel命令再次编译，可以看到编译之后，代码里面为我们依赖了_regenerator ，这个正是上一步骤中，我们使用polyfill引入的，通过require方式引入，减少了对变量的污染。此外，像createClass方法，都被抽取babel-runtime里面，这里也很好的解释了babel-runtime包的作用！，此外，transform-runtime作为一个插件被使用，他有什么功能？他具体也是一个代码转化插件包，与babel-runtime 不同的是，他是提供转化代码工具，不在运行时使用，而babel-runtime提供的 是一些需要在程序运行时需要使用的公共包。
这里存在着一个坑。https://mp.csdn.net/mdeditor/98637033#
参考我的另一篇文章。
到了目前的这一步，我们算是解决了一堆的前设条件,接下来是支持vue
前面的，npm un babel-polyfill卸载掉polyfill，这个可以看你的喜好，如果你喜欢polyfill可以把babel-runtime /transformer给卸载掉，并去掉配置，留一个就好了，当然你想2个留着也可以，自己参考官方文档，看看他们的整合配置，可以说polyfill功能比runtime小，因为runtime还提供一些基础方法的抽离。这点也是我建议用runtime 的原因所在。
5. 安装vue
npm i vue -S
npm i vue-style-loader -D
vue插件提供了我们写代码的时候的依赖
import Vue from 'vue'
new Vue({
el:"#app"
})
同时，打开我们之前的webpack.config.js文件，修改里面的style-loader为vue-style-loader，这个插件（vue-style-loader）会帮我们处理一些vue控件里面的样式设置。
6.这个时候，我们又出现了2条分支
安装了vue 之后，呢，此时，如果你采用传统的开发方式（不建议）在我们的Vue实例里面填写一些方法，然后界面上渲染之类的，你会发现并不行。
这是因为，我们通过Import导入的vue是一个不完整的版本。
那这个时候要怎么办？简单，引入完整的不就得了。
当然，你如果不想这么做,像在webpack.config.js里面
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
也是可以的。
刚刚上面我们说到2个分支。那么另外一条分支是啥。另外一条分支是使用*.vue结尾的文件。
使用vue结尾的文件，我们第一时间就会想到转化器，也就是webpack转化器，那么就得再安装插件了。
npm i vue-loader vue-template-compiler -D
装完之后，进入webpack.config.js配置文件
{
test: /\.vue$/,
loader: 'vue-loader'
},
在webpack.config.js中
引入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
然后在plugins里面添加如下代码
This time, our home page reads as follows, to note here, when imported vue is to use instead of vue vue.min.js, because this will lead to problems of
open interfaces, a successful visit, this time, can be considered vue set up ok. Also if you want to use vue-router then. It can be introduced by the following code
npm install vue-router --save-dev
Then you can use the route.
Support MintUI
1. Installation following command
npm i mint-ui -S
2. Global Import Act
Global import and then you can easily use the page. However, we adopt a different way, import demand
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
Then you can refer to on our pages casual.
3. Demand introduction method
Import demand can reduce packaged bundle.js file size, this online environment is helpful.
Practice a little trouble a little bit. Babel also need to install a plug-in, the plug-in will help us to import demand.
a. Plug
npm install babel-plugin-component -D
b. Modify .babelrc
add the following fragment .babelrc file, can be understood as a component added plug, and the plug-in for the configuration.
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
For this example, because we use the transform-runtime in front, so here we will be one more plug-in
postscript
As usual our project development, the demand for rapid development makes us lose the understanding of nature, we must learn to escape the daily development of open trivial, to understand the underlying technology in order to go farther and farther on the road technology.
At this point, our project will build the entire contents is completed. Writing is not easy, like readers can support what the author.
