———————————-(VUE玖)————————————-

vue初步讲解

一.项目包与文件讲解

1.babel.config.js

有ES6 7高阶语法库和低阶语法库,可以将高阶语法转换成低阶语法

2.vue.config.js

创建vue.config.js来覆盖之前自带的配置

(2.1)发布时去掉.map
  1. module.exports={
  2.     devServer:{
  3.         port:80
  4.     },
  5.     //如果是发布的去掉.map
  6.  productionSourceMap: process.env.NODE_ENV === 'production' ? false : true  
  7. }

3.src中的assets

是被引用的静态

4.main.js

入口文件,相当于app.js

二、安装Express 插件(vscode插件)

测试发布

(2.1) 使用自己的注册表修改文件(放在桌面运行,要修改路径)—>.reg文件
  1. Windows Registry Editor Version 5.00
  3. [HKEY_CLASSES_ROOT\*\shell\VSCode]
  4. @="Open with Code"
  5. "Icon"="E:\\VScode\\Microsoft VS Code\\Code.exe"
  7. [HKEY_CLASSES_ROOT\*\shell\VSCode\command]
  8. @="\"E:\\VScode\\Microsoft VS Code\\Code.exe\" \"%1\""
  10. Windows Registry Editor Version 5.00
  12. [HKEY_CLASSES_ROOT\Directory\shell\VSCode]
  13. @="Open with Code"
  14. "Icon"="E:\\VScode\\Microsoft VS Code\\Code.exe"
  16. [HKEY_CLASSES_ROOT\Directory\shell\VSCode\command]
  17. @="\"E:\\VScode\\Microsoft VS Code\\Code.exe\" \"%V\""
  19. Windows Registry Editor Version 5.00
  21. [HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode]
  22. @="Open with Code"
  23. "Icon"="E:\\VScode\\Microsoft VS Code\\Code.exe"
  25. [HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode\command]
  26. @="\"E:\\VScode\\Microsoft VS Code\\Code.exe\" \"%V\""

(2.2)使用
  1.  ctrl + shift +p
  2. Epess Hot Curent Wrspac with Random or Number and Open in Bover

(2.3)关闭
  1.  关闭时候一定要通过 Stop express

三. (.VUE)文件讲解

(3.1)App.vue

根组件

(3.2) components

子组件包

四、vue-cli 3.x 的 views 和 components有什么区别？

  1. components是小组件
    2.containers是容器级组件
    3.views是页面级组件

4.也就是说，views是页面级组件，components是小组件，小组件可被引用在views中，一般views组件不被复用【containers是容器级组件（根据 项目大小决定是否使用）】

5.从组件大小级别区分 components - （containers）- views

五、[vue-cli@3.0的vue.config.js最基本配置]

  1. const path = require('path')
  2. module.exports = {
  3.   // 基本路径
  4.   publicPath: process.env.NODE_ENV === 'production'
  5.     ? ''
  6.     : '/',
  7.   // 输出文件目录
  8.   outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
  9.   // eslint-loader 是否在保存的时候检查
  10.   lintOnSave: true,
  11.   /**
  12.    * webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  13.    **/
  14.   chainWebpack: (config) => {
  15.     // 修复HMR
  16.     config.resolve.symlinks(true)
  17.     const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
  18.     types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  19.   },
  20.   configureWebpack: (config) => {
  21.     config.resolve = { // 配置解析别名
  22.       extensions: ['.js', '.json', '.vue'],
  23.       alias: {
  24.         '@': path.resolve(__dirname, './src'),
  25.         'components': path.resolve(__dirname, './src/components'),
  26.         'common': path.resolve(__dirname, './src/common'),
  27.         'api': path.resolve(__dirname, './src/api'),
  28.         'router': path.resolve(__dirname, './src/router'),
  29.         'views': path.resolve(__dirname, './src/views'),
  30.         'data': path.resolve(__dirname, './src/data'),
  31.         'public': path.resolve(__dirname, 'public')
  32.       }
  33.     }
  34.   },
  35.   // 生产环境是否生成 sourceMap 文件
  36.   productionSourceMap: false,
  37.   // css相关配置
  38.   css: {
  39.     // 是否使用css分离插件 ExtractTextPlugin
  40.     // extract: true,
  41.     // 开启 CSS source maps?
  42.     sourceMap: false,
  43.     // css预设器配置项
  44.     loaderOptions: {},
  45.     // 启用 CSS modules for all css / pre-processor files.
  46.     requireModuleExtension: false
  47.   },
  48.   // use thread-loader for babel & TS in production build
  49.   // enabled by default if the machine has more than 1 cores
  50.   parallel: require('os').cpus().length > 1,
  51.   /**
  52.    *  PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  53.    */
  54.   pwa: {},
  55.   // webpack-dev-server 相关配置
  56.   devServer: {
  57.     open: true, // 编译完成是否打开网页
  58.     host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
  59.     port: 8080, // 访问端口
  60.     https: false, // 编译失败时刷新页面
  61.     hot: true, // 开启热加载
  62.     hotOnly: false,
  63.     proxy: null, // 设置代理
  64.     overlay: { // 全屏模式下是否显示脚本错误
  65.       warnings: true,
  66.       errors: true
  67.     },
  68.     before: app => {
  69.     }
  70.   },
  71.   /**
  72.    * 第三方插件配置
  73.    */
  74.   pluginOptions: {}
  75. }
  77. // 全局导入样式
  78. function addStyleResource (rule) {
  79.   rule.use('style-resource')
  80.     .loader('style-resources-loader')
  81.     .options({
  82.       patterns: [
  83.         path.resolve(__dirname, './src/common/stylus/index.styl')
  84.       ]
  85.     })
  86. }