vue手动配置搭建项目

1 创建 根目录 letao 


2 初始化仓库                               git init


3 创建说明书package.json                   npm init -y 
      
4 用yarn替代npm 快速                   yarn --version   查版本


5创建源码目录src index.js文件              mkdir src


6安装webpack包                             npm install --save-dev webpack webpack-cli          npm 是 --save-dev ===  -D


7写webpack配置文件webpack.config.js
 配置文件和package.json


8装可以打包CSS的包                         npm i style-loader css-loader --dev


9装好打包CSS的配置文件


10安装图片的包                             yarn add --dev file-loader        npm install --save-dev file-loader 
  配置文件  
                    
11安装打包HTML文件安包                     npm install --save-dev html-webpack-plugin
  配置文件


12打包时清除旧的dist内容，重新创建dist     npm install clean-webpack-plugin --save-dev
  配置文件


13装bootstrap 有字体,配置打包字体项        npm i bootstrap@3.3.7


14装打包less的包                           npm install --save-dev less-loader less
  配置文件


15依赖less再装less                         npm i --dev less

es6转es5，，，处理小图片的base64内置处理


16 安装处理小图片包                        npm install --save-dev url-loader
  配置文件加个svg


17 装es6转es5的包                         npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env   新的可以
                                                       npm install babel-loader babel-core babel-preset-env --dev     旧的
  配置文件不转第三方包 ,presets配置不写@babel 和包对应 但是安新的 presets配置就不改了


18 设置mode在配置文件中与entry平级           mode: 'production',生产环境的（上线用的压缩的）不写默认压缩的   可选项 development（开发用的）


19 方便找错配置文件 和entry平级              devtool: 'inline-source-map'


20 开启监视模式不用手动打包，文件一变自动打包在package.json文件配置"scripts"     "watch": "webpack --watch",


21 浏览器自动刷新装包相当于开个服务器                        npm install --save-dev webpack-dev-server
   配置文件和entry平级  将dist设制成www的    在package.json中"scripts"   配置 "dev":  "webpack-dev-server --open --progress", 打包进度条

22 热更新 局部的配置文件 ①const webpack = require('webpack');②app: './src/index.js'不写③hot: true

④new webpack.NamedModulesPlugin(),

   new webpack.HotModuleReplacementPlugin()


23 指定vue文件可以运行，装vue核心依赖 不用-dev            npm i vue
   配置vue的加载路径 和entry平级 resolve: { alias: { 'vue$': 'vue/dist/vue.js'} }


24 单文件组件解决组件繁琐问题css,js都有作用域           npm i --dev vue-loader vue-template-compiler 
   配置文件 在rules里   {test: /\.vue$/,use: 'vue-loader'}


25 依赖包安装node_modules                                      npm install


26 安装路由，引包，挂载，在Vue程序中                           npm i vue-router


27 配置路由表