对于 Webpack，Vue 单文件组件，VueCLI 和 Element-UI 一些简单总结:

• Vue单文件组件

---

• 传统组件的问题和解决方案:

1. 全局定义的组件必须保证组件名不重复;
2. 字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的\;
3. 不支持CSS意味着当HTML和Javascript组件化时,CSS明显被遗漏;
4. 没有构建步骤限制，只能使用HTML和ES5 Javascript,而不能使用预处理器（如Babel）;
5. 针对传统组件的问题,Vue提供了一个解决方案--- 使用单文件组件;

• 单文件组件的基本用法:

1. template  ---> 组件的模板区域;
2. script       ---> 业务逻辑区域;
3. style        ---> 样式区域;

• webpack中配置vue组件的加载器

---

• webpack中配置vue组件的加载器:

1. 运行 npm i vue-loader vue-template-compiler -D 命令;
2. 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下:

   const VueLoaderPlugin = require('vue-loader/lib/plugin')
   module.exports = {
   module:{
   	rules:[
   	//...其他规则
   	{test:/\.vue$/,loader:'vue-loader'}
   	]
   },
   plugins:[
   	//...其他插件
   	new VueLoaderPlugin()//请确保引入这个插件
    ]
   }

    

• 在webpack项目中使用vue:

1. 运行 npm i vue -S 安装vue;
2. 在 src--index.js 入口文件中，通过  import Vue from 'vue'  来导入 vue 构造函数;
3. 创建 vue 的实例对象，并指定要控制的el区域;
4. 通过 render 函数渲染 App 组件;

5. //1,导入Vue构造函数
   import Vue from 'vue'
   //2,导入App根组件
   import App from './components/App.vue'
   const vm = new Vue({	
   //3,指定vm实例要控制的页面区域
   el:"#app",
   //4,通过render函数，把指定的组件渲染到el区域中
   render:h=>h(App)	
   })

    

• webpack打包发布:

1. 上线之前需要通过 webpack 将应用进行整体打包，可以通过 package.json 文件配置打包命令:

   //在package.json文件中配置webpack打包命令
   //该命令默认加载项目根目录中的webpack,config.js配置文件	
   "scripts":{
   //用于打包的命令
   "build":"webpack -p"
   //用于开发调试的命令
   "dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000"
   }

    

2. 运行 npm run build;

• Vue脚手架(Vue CLI)

---

• Vue脚手架的基本用法:

Vue脚手架用于快速生成Vue项目基础架构，其官网地址为:https://cli.vuejs.org/zh/

• 使用步骤:

1. 运行: npm run serve
2. 安装 3.x 版本的 vue 脚手架 npm install -g @vue/cli
3. 基于 3.x 版本的脚手架创建 vue 项目:

基于交互命令行的方式，创建新版 vue 项目	vue create my-project
基于图形化界面的方式，创建新版 vue 项目	vue ui
基于2.x的旧模板，创建旧版的 vue 项目	npm install -g @vue/cli-init vue init webpack my-project

 

• Vue脚手架生成的项目结构分析:

1. node_modules            --->依赖包目录;
2. public                          --->静态资源目录;
3. src                               --->组件源码目录;
4. babel.config.js             --->Babel配置文件;

• Vue脚手架的自定义配置:

1. 通过 package.json 配置项目:

   //必须是符合规范的json语法
   "vue":{
   "devServer":{
   "port":8888,
   "open":true
   }
   }
   //注意:不推荐使用这种配置方式，因为package.json主要用来管理包的，配置信息；为了方便维护，推荐将vue脚手架相关的配置，单独定义到vue.config.js配置文件中

    

2. 单独配置文件配置项目:

• 在项目的根目录创建文件 vue.config.js ;

• 在该文件中进行相关配置，从而覆盖默认配置:

  //vue.config.js	
  module.exports = {		
  devServer:{			
  port:8888,		
  open:true
  }	
  }

   

• Element-UI的基本使用

---

Element-UI: 一套为开发者，设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。官方地址

• 基于命令行方式手动安装:

1. 安装依赖包 npm i element-ui -S;
2. 导入 Element-UI 相关资源:

   //导入组件库	
   import ElementUI from 'element-ui';	
   //导入组件相关样式	
   import 'element-ui/lib/theme-chalk/index.css';	
   //配置Vue插件	
   Vue.use(ElementUI);

    

• 基于图形化界面自动安装:

1. 运行 vue ui 命令，打开图形化界面;
2. 通过 Vue 项目管理器，进入具体的项目配置面板;
3. 点击插件 ---> 添加插件，进行插件查询面板;
4. 搜索 vue-cli-plugin-element 并安装;
5. 配置插件，实现按需导入，从而减少打包后项目的体积;