• vue文件拆分为html + ts + css


    vue开发过程中我们习惯性的将js和css从vue文件中提取出来作为单独的文件在vue中引入,从而避免冗长的vue文件给后期的维护带来麻烦。

    拆分后一个vue文件就成了 vue + js + css三个文件,此处的vue文件主要就是html的内容,既然如此,vue文件干脆不保留了,直接改为html + js + css。

      本地安装vue-cli:

    npm -g @vue/cli@3.0.0-beta.6

      创建项目:

    vue create my-project
    此时会弹出如下界面:

       我们选择第二个自主配置功能,选中后会弹出如下界面:

      

     vue-cli支持巴中功能特性,我们选择TS(大势所趋),Router,Vuex,CSS,Unit几个就可以了,根据个人喜好。

    后面的就回车就可以了,主要是css风格(less,scss,stylus)同样是按照个人喜好来。

    创建完成后,我们就要开始对vue进行改造了,很简单:

    在项目根目录创建vue.config.js文件,这个文件主要是放置webpack配置项的,因为使用的是cli3所以跟之前的有所不同。

    这是我的配置:

    // vue.config.js
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const fs = require('fs')
    
    // 路径引入的方法
    const resolve = (dir) => {
      return path.resolve(__dirname, dir);
    }
    
    module.exports = {
      publicPath: '/',
      outputDir: 'dist', // 打包的目录
      lintOnSave: true, // 在保存时校验格式
      productionSourceMap: false, // 生产环境是否生成 SourceMap
      // 传递第三方插件选项
      pluginOptions: {
    
      },
      chainWebpack: config => {
        // 配置别名
        config.extensions = ['.js', '.ts', '.vue', '.html'];
        config.resolve.alias
          .set('vue$', 'vue/dist/vue.esm.js')
        // GraphQL Loader
        config.module
          .rule()
          .test(/.html$/)
          .use()
            .loader('html-loader')//预读,识别html文件
            .end()
      }
    }
    

    主要就是html-loader,使其识别html文件。

    然后我们就可以愉快的对vue进行拆分了,主要就是新建,ts,html,css三个文件,在ts里面引入html和css文件即可:

    import { Component, Vue, Prop,Watch } from 'vue-property-decorator'
    import './HolleWord.less';
    
    @Component({
        template: require("./HolleWord.html")
    })
    export default class extends Vue {
        
        mounted() {
    
        }
    }

    到此大功告成。

     
  • 相关阅读:
    JDBC加载各种数据库方法和URL
    javascript通用表格验证程序
    javascript缩放图片
    ASP.NET 2.0 中改进的缓存功能
    滚轮改变图片大小
    在IE7关闭窗口,上传图片无法预览,window.status无效问题解决办法
    Sqlserver存储过程和C#分页类简化你的代码
    C#cookie使用
    ASP.NET2.0中控件的简单异步回调
    JavaScript表单验证大全
  • 原文地址:https://www.cnblogs.com/sixrookie/p/12552167.html
Copyright © 2020-2023  润新知